diff --git a/assets/js/12.2c105f9d.js b/assets/js/12.2c18a516.js
similarity index 67%
rename from assets/js/12.2c105f9d.js
rename to assets/js/12.2c18a516.js
index acd3c02a..9a52201e 100644
--- a/assets/js/12.2c105f9d.js
+++ b/assets/js/12.2c18a516.js
@@ -1 +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,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/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 preform 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<f32>;\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<f32>(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 inputs 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<f32>")]),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<f32> {\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<f32> {\n    return vec4<f32>(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            alpha_blend"),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("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(",")]),t._v("\n            color_blend"),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("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(",")]),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_stage")]),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 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                attachment"),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
+(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/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 preform 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<f32>;\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<f32>(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 inputs 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<f32>")]),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<f32> {\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<f32> {\n    return vec4<f32>(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            alpha_blend"),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("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(",")]),t._v("\n            color_blend"),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("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(",")]),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 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                attachment"),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/5.eb0df1ad.js b/assets/js/5.eb0df1ad.js
new file mode 100644
index 00000000..63ed2ef3
--- /dev/null
+++ b/assets/js/5.eb0df1ad.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{204:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},205:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},206:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},207:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},208:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.75f852e2.png"},258:function(t,s,a){"use strict";a.r(s);var n=a(10),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"textures-and-bind-groups"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textures-and-bind-groups"}},[t._v("#")]),t._v(" Textures and bind groups")]),t._v(" "),n("p",[t._v("Up to this point we have been drawing super simple shapes. While we can make a game with just triangles, trying to draw highly detailed objects would massively limit what devices could even run our game. However, we can get around this problem with "),n("strong",[t._v("textures")]),t._v(".")]),t._v(" "),n("p",[t._v("Textures are images overlayed on a triangle mesh to make it seem more detailed. There are multiple types of textures such as normal maps, bump maps, specular maps and diffuse maps. We're going to talk about diffuse maps, or more simply, the color texture.")]),t._v(" "),n("h2",{attrs:{id:"loading-an-image-from-a-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#loading-an-image-from-a-file"}},[t._v("#")]),t._v(" Loading an image from a file")]),t._v(" "),n("p",[t._v("If we want to map an image to our mesh, we first need an image. Let's use this happy little tree:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(204),alt:"a happy tree"}})]),t._v(" "),n("p",[t._v("We'll use the "),n("a",{attrs:{href:"https://crates.io/crates/image",target:"_blank",rel:"noopener noreferrer"}},[t._v("image crate"),n("OutboundLink")],1),t._v(" to load our tree. We already added to our dependencies in the first section, so all we have to do is use it.")]),t._v(" "),n("p",[t._v("In "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method add the following just after creating the "),n("code",[t._v("swap_chain")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" swap_chain "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_swap_chain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_image "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Here we grab the bytes from our image file and load them into an image which is then converted into a "),n("code",[t._v("Vec")]),t._v(" of rgba bytes. We also save the image's dimensions for when we create the actual "),n("code",[t._v("Texture")]),t._v(".")]),t._v(" "),n("p",[t._v("Now, let's create the "),n("code",[t._v("Texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All textures are stored as 3D, we represent our 2D texture")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// by setting depth to 1.")]),t._v("\n        size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll talk about this a little later")]),t._v("\n        sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// SAMPLED tells wgpu that we want to use this texture in shaders")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// COPY_DST means that we want to copy data to this texture")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAMPLED")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_texture"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"getting-data-into-a-texture"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-into-a-texture"}},[t._v("#")]),t._v(" Getting data into a Texture")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("Texture")]),t._v(" struct has no methods to interact with the data directly. However, we can use a method on the "),n("code",[t._v("queue")]),t._v(" we created earlier called "),n("code",[t._v("write_texture")]),t._v(" to load the texture in. Let's take a look at how we do that:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tells wgpu where to copy the pixel data")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The actual pixel data")]),t._v("\n    diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The layout of the texture")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("The old way of writing data to a texture was to copy the pixel data to a buffer and then copy it to the texture. Using "),n("code",[t._v("write_texture")]),t._v(" is a bit more efficient as it uses one less buffer - I'll leave it here though in case you need it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Temp Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_buffer_copy_encoder"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nencoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_buffer_to_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        array_layer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nqueue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("bytes_per_row")]),t._v(" field needs some consideration. This value needs to be a multiple of 256. Check out "),n("RouterLink",{attrs:{to:"/showcase/gifs/#how-do-we-make-the-frames"}},[t._v("the gif tutorial")]),t._v(" for more details.")],1)]),t._v(" "),n("h2",{attrs:{id:"textureviews-and-samplers"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textureviews-and-samplers"}},[t._v("#")]),t._v(" TextureViews and Samplers")]),t._v(" "),n("p",[t._v("Now that our texture has data in it, we need a way to use it. This is where a "),n("code",[t._v("TextureView")]),t._v(" and a "),n("code",[t._v("Sampler")]),t._v(" come in. A "),n("code",[t._v("TextureView")]),t._v(" offers us a "),n("em",[t._v("view")]),t._v(" into our texture. A "),n("code",[t._v("Sampler")]),t._v(" controls how the "),n("code",[t._v("Texture")]),t._v(" is "),n("em",[t._v("sampled")]),t._v(". Sampling works similar to the eyedropper tool in GIMP/Photoshop. Our program supplies a coordinate on the texture (known as a "),n("em",[t._v("texture coordinate")]),t._v("), and the sampler then returns the corresponding color based on the texture and some internal parameters.")]),t._v(" "),n("p",[t._v("Let's define our "),n("code",[t._v("diffuse_texture_view")]),t._v(" and "),n("code",[t._v("diffuse_sampler")]),t._v(" now:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need to configure the texture view much, so let's")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let wgpu define it.")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture_view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("address_mode_*")]),t._v(" parameters determine what to do if the sampler gets a texture coordinate that's outside of the texture itself. We have a few options to choose from:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("ClampToEdge")]),t._v(": Any texture coordinates outside the texture will return the color of the nearest pixel on the edges of the texture.")]),t._v(" "),n("li",[n("code",[t._v("Repeat")]),t._v(": The texture will repeat as texture coordinates exceed the textures dimensions.")]),t._v(" "),n("li",[n("code",[t._v("MirrorRepeat")]),t._v(": Similar to "),n("code",[t._v("Repeat")]),t._v(", but the image will flip when going over boundaries.")])]),t._v(" "),n("p",[n("img",{attrs:{src:a(205),alt:"address_mode.png"}})]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("mag_filter")]),t._v(" and "),n("code",[t._v("min_filter")]),t._v(" options describe what to do when a fragment covers multiple pixels, or there are multiple fragments for a single pixel. This often comes into play when viewing a surface from up close, or from far away.")]),t._v(" "),n("p",[t._v("There are 2 options:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("Linear")]),t._v(": Attempt to blend the in-between fragments so that they seem to flow together.")]),t._v(" "),n("li",[n("code",[t._v("Nearest")]),t._v(": In-between fragments will use the color of the nearest pixel. This creates an image that's crisper from far away, but pixelated up close. This can be desirable, however, if your textures are designed to be pixelated, like in pixel art games, or voxel games like Minecraft.")])]),t._v(" "),n("p",[t._v("Mipmaps are a complex topic, and will require "),n("a",{attrs:{href:"/todo"}},[t._v("their own section in the future")]),t._v(". For now, we can say that "),n("code",[t._v("mipmap_filter")]),t._v(" functions similar to "),n("code",[t._v("(mag/min)_filter")]),t._v(" as it tells the sampler how to blend between mipmaps.")]),t._v(" "),n("p",[t._v("I'm using some defaults for the other fields. If you want to see what they are, check "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.7.0/wgpu/struct.SamplerDescriptor.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("the wgpu docs"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("All these different resources are nice and all, but they don't do us much good if we can't plug them in anywhere. This is where "),n("code",[t._v("BindGroup")]),t._v("s and "),n("code",[t._v("PipelineLayout")]),t._v("s come in.")]),t._v(" "),n("h2",{attrs:{id:"the-bindgroup"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-bindgroup"}},[t._v("#")]),t._v(" The BindGroup")]),t._v(" "),n("p",[t._v("A "),n("code",[t._v("BindGroup")]),t._v(" describes a set of resources and how they can be accessed by a shader. We create a "),n("code",[t._v("BindGroup")]),t._v(" using a "),n("code",[t._v("BindGroupLayout")]),t._v(". Let's make one of those first.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    multisampled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    view_dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    sample_type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    comparison"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    filtering"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Our "),n("code",[t._v("texture_bind_group_layout")]),t._v(" has two entries: one for a sampled texture at binding 0, and one for a sampler at binding 1. Both of these bindings are visible only to the fragment shader as specified by "),n("code",[t._v("FRAGMENT")]),t._v(". The possible values for this field are any bitwise combination of "),n("code",[t._v("NONE")]),t._v(", "),n("code",[t._v("VERTEX")]),t._v(", "),n("code",[t._v("FRAGMENT")]),t._v(", or "),n("code",[t._v("COMPUTE")]),t._v(". Most of the time we'll only use "),n("code",[t._v("FRAGMENT")]),t._v(" for textures and samplers, but it's good to know what else is available.")]),t._v(" "),n("p",[t._v("With "),n("code",[t._v("texture_bind_group_layout")]),t._v(", we can now create our "),n("code",[t._v("BindGroup")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture_view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Looking at this you might get a bit of déjà vu! That's because a "),n("code",[t._v("BindGroup")]),t._v(" is a more specific declaration of the "),n("code",[t._v("BindGroupLayout")]),t._v(". The reason why they're separate is it allows us to swap out "),n("code",[t._v("BindGroup")]),t._v("s on the fly, so long as they all share the same "),n("code",[t._v("BindGroupLayout")]),t._v(". Each texture and sampler we create will need to be added to a "),n("code",[t._v("BindGroup")]),t._v(". For our purposes, we'll create a new bind group for each texture.")]),t._v(" "),n("p",[t._v("Now that we have our "),n("code",[t._v("diffuse_bind_group")]),t._v(", let's add it to our "),n("code",[t._v("State")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChainDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    num_indicies"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And make sure we return these fields in the "),n("code",[t._v("new")]),t._v(" method:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n            diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we've got our "),n("code",[t._v("BindGroup")]),t._v(", we can use it in our "),n("code",[t._v("render()")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"pipelinelayout"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#pipelinelayout"}},[t._v("#")]),t._v(" PipelineLayout")]),t._v(" "),n("p",[t._v("Remember the "),n("code",[t._v("PipelineLayout")]),t._v(" we created back in "),n("a",{attrs:{href:"/beginner/tutorial3-pipeline#how-do-we-use-the-shaders"}},[t._v("the pipeline section")]),t._v("? Now we finally get to use it! The "),n("code",[t._v("PipelineLayout")]),t._v(" contains a list of "),n("code",[t._v("BindGroupLayout")]),t._v("s that the pipeline can use. Modify "),n("code",[t._v("render_pipeline_layout")]),t._v(" to use our "),n("code",[t._v("texture_bind_group_layout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n            bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n            push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"a-change-to-the-vertices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-change-to-the-vertices"}},[t._v("#")]),t._v(" A change to the VERTICES")]),t._v(" "),n("p",[t._v("There's a few things we need to change about our "),n("code",[t._v("Vertex")]),t._v(" definition. Up to now we've been using a "),n("code",[t._v("color")]),t._v(" attribute to set the color of our mesh. Now that we're using a texture, we want to replace our "),n("code",[t._v("color")]),t._v(" with "),n("code",[t._v("tex_coords")]),t._v(". These coordinates will then be passed to the "),n("code",[t._v("Sampler")]),t._v(" to retrieve the appropriate color.")]),t._v(" "),n("p",[t._v("Since our "),n("code",[t._v("tex_coords")]),t._v(" are two dimensional, we'll change the field to take two floats instead of three.")]),t._v(" "),n("p",[t._v("First, we'll change the "),n("code",[t._v("Vertex")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then reflect these changes in the "),n("code",[t._v("VertexBufferLayout")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Lastly we need to change "),n("code",[t._v("VERTICES")]),t._v(" itself. Replace the existing definition with the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.99240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.56958646")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.050602943")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.15267089")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.7347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"shader-time"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shader-time"}},[t._v("#")]),t._v(" Shader time")]),t._v(" "),n("p",[t._v("With our new "),n("code",[t._v("Vertex")]),t._v(" structure in place it's time to update our shaders. We'll first need to pass our "),n("code",[t._v("tex_coords")]),t._v(" into the vertex shader and then use them over to our fragment shader to get the final color from the "),n("code",[t._v("Sampler")]),t._v(". Let's start with the vertex shader:")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\n\nstruct VertexInput {\n    [[location(0)]] position: vec3<f32>;\n    [[location(1)]] tex_coords: vec2<f32>;\n};\n\nstruct VertexOutput {\n    [[builtin(position)]] clip_position: vec4<f32>;\n    [[location(0)]] tex_coords: vec2<f32>;\n};\n\n[[stage(vertex)]]\nfn main(\n    model: VertexInput,\n) -> VertexOutput {\n    var out: VertexOutput;\n    out.tex_coords = model.tex_coords;\n    out.clip_position = vec4<f32>(model.position, 1.0);\n    return out;\n}\n")])])]),n("p",[t._v("Now that we have our vertex shader outputting our "),n("code",[t._v("tex_coords")]),t._v(", we need to change the fragment shader to take them in. With these coordinates, we'll finally be able to use our sampler to get a color from our texture.")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nvar t_diffuse"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" texture_2d"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nvar s_diffuse"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nfn "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexOutput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("textureSample")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The variables "),n("code",[t._v("t_diffuse")]),t._v(" and "),n("code",[t._v("s_diffuse")]),t._v(" are what's known as uniforms. We'll go over uniforms more in the "),n("RouterLink",{attrs:{to:"/beginner/tutorial6-uniforms/"}},[t._v("cameras section")]),t._v(". For now, all we need to know is that "),n("code",[t._v("group()")]),t._v(" corresponds to the 1st parameter in "),n("code",[t._v("set_bind_group()")]),t._v(" and "),n("code",[t._v("binding()")]),t._v(" relates to the "),n("code",[t._v("binding")]),t._v(" specified when we created the "),n("code",[t._v("BindGroupLayout")]),t._v(" and "),n("code",[t._v("BindGroup")]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"the-results"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-results"}},[t._v("#")]),t._v(" The results")]),t._v(" "),n("p",[t._v("If we run our program now we should get the following result:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(206),alt:"an upside down tree on a hexagon"}})]),t._v(" "),n("p",[t._v("That's weird, our tree is upside down! This is because wgpu's world coordinates have the y-axis pointing up, while texture coordinates have the y-axis pointing down. In other words, (0, 0) in texture coordinates coresponds to the top-left of the image, while (1, 1) is the bottom right.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(207),alt:"happy-tree-uv-coords.png"}})]),t._v(" "),n("p",[t._v("We can get our triangle right-side up by inverting the y coordinate of each texture coordinate:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.00759614")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.43041354")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.949397057")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.84732911")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2652641")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With that in place, we now have our tree right-side up on our hexagon:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(208),alt:"our happy tree as it should be"}})]),t._v(" "),n("h2",{attrs:{id:"cleaning-things-up"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-things-up"}},[t._v("#")]),t._v(" Cleaning things up")]),t._v(" "),n("p",[t._v("For convenience sake, let's pull our texture code into its module. We'll first need to add the "),n("a",{attrs:{href:"https://docs.rs/anyhow/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),n("OutboundLink")],1),t._v(" crate to our "),n("code",[t._v("Cargo.toml")]),t._v(" file to simplify error handling;")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.24"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.8"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("futures")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.6"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v(" // NEW!\n")])])]),n("p",[t._v("Then, in a new file called "),n("code",[t._v("src/texture.rs")]),t._v(", add the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAMPLED")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        \n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Note that we're returning a "),n("code",[t._v("CommandBuffer")]),t._v(" with our texture. This means we can load multiple textures at the same time, and then submit all their command buffers at once.")]),t._v(" "),n("p",[t._v("We need to import "),n("code",[t._v("texture.rs")]),t._v(" as a module, so somewhere at the top of "),n("code",[t._v("main.rs")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The texture creation code in "),n("code",[t._v("new()")]),t._v(" now gets a lot simpler:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" swap_chain "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_swap_chain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Everything up until `let texture_bind_group_layout = ...` can now be removed.")]),t._v("\n")])])]),n("p",[t._v("We still need to store the bind group separately so that "),n("code",[t._v("Texture")]),t._v(" doesn't need know how the "),n("code",[t._v("BindGroup")]),t._v(" is laid out. Creating the "),n("code",[t._v("diffuse_bind_group")]),t._v(" changes slightly to use the "),n("code",[t._v("view")]),t._v(" and "),n("code",[t._v("sampler")]),t._v(" fields of our "),n("code",[t._v("diffuse_texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Finally, let's update our "),n("code",[t._v("State")]),t._v(" field to use our shiny new "),n("code",[t._v("Texture")]),t._v(" struct, as we'll need it in future tutorials.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n            num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Phew!")]),t._v(" "),n("p",[t._v("With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create another texture and swap it out when you press the space key.")]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/assets/js/5.f132d94f.js b/assets/js/5.f132d94f.js
deleted file mode 100644
index 5d241bf2..00000000
--- a/assets/js/5.f132d94f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{204:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},205:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},206:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},207:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},208:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.75f852e2.png"},258:function(t,s,a){"use strict";a.r(s);var n=a(10),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"textures-and-bind-groups"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textures-and-bind-groups"}},[t._v("#")]),t._v(" Textures and bind groups")]),t._v(" "),n("p",[t._v("Up to this point we have been drawing super simple shapes. While we can make a game with just triangles, trying to draw highly detailed objects would massively limit what devices could even run our game. However, we can get around this problem with "),n("strong",[t._v("textures")]),t._v(".")]),t._v(" "),n("p",[t._v("Textures are images overlayed on a triangle mesh to make it seem more detailed. There are multiple types of textures such as normal maps, bump maps, specular maps and diffuse maps. We're going to talk about diffuse maps, or more simply, the color texture.")]),t._v(" "),n("h2",{attrs:{id:"loading-an-image-from-a-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#loading-an-image-from-a-file"}},[t._v("#")]),t._v(" Loading an image from a file")]),t._v(" "),n("p",[t._v("If we want to map an image to our mesh, we first need an image. Let's use this happy little tree:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(204),alt:"a happy tree"}})]),t._v(" "),n("p",[t._v("We'll use the "),n("a",{attrs:{href:"https://crates.io/crates/image",target:"_blank",rel:"noopener noreferrer"}},[t._v("image crate"),n("OutboundLink")],1),t._v(" to load our tree. We already added to our dependencies in the first section, so all we have to do is use it.")]),t._v(" "),n("p",[t._v("In "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method add the following just after creating the "),n("code",[t._v("swap_chain")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" swap_chain "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_swap_chain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_image "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Here we grab the bytes from our image file and load them into an image which is then converted into a "),n("code",[t._v("Vec")]),t._v(" of rgba bytes. We also save the image's dimensions for when we create the actual "),n("code",[t._v("Texture")]),t._v(".")]),t._v(" "),n("p",[t._v("Now, let's create the "),n("code",[t._v("Texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All textures are stored as 3D, we represent our 2D texture")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// by setting depth to 1.")]),t._v("\n        size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll talk about this a little later")]),t._v("\n        sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// SAMPLED tells wgpu that we want to use this texture in shaders")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// COPY_DST means that we want to copy data to this texture")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAMPLED")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_texture"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"getting-data-into-a-texture"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-into-a-texture"}},[t._v("#")]),t._v(" Getting data into a Texture")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("Texture")]),t._v(" struct has no methods to interact with the data directly. However, we can use a method on the "),n("code",[t._v("queue")]),t._v(" we created earlier called "),n("code",[t._v("write_texture")]),t._v(" to load the texture in. Let's take a look at how we do that:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tells wgpu where to copy the pixel data")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The actual pixel data")]),t._v("\n    diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The layout of the texture")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("The old way of writing data to a texture was to copy the pixel data to a buffer and then copy it to the texture. Using "),n("code",[t._v("write_texture")]),t._v(" is a bit more efficient as it uses one less buffer - I'll leave it here though in case you need it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Temp Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_buffer_copy_encoder"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nencoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_buffer_to_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        array_layer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nqueue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("bytes_per_row")]),t._v(" field needs some consideration. This value needs to be a multiple of 256. Check out "),n("RouterLink",{attrs:{to:"/showcase/gifs/#how-do-we-make-the-frames"}},[t._v("the gif tutorial")]),t._v(" for more details.")],1)]),t._v(" "),n("h2",{attrs:{id:"textureviews-and-samplers"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textureviews-and-samplers"}},[t._v("#")]),t._v(" TextureViews and Samplers")]),t._v(" "),n("p",[t._v("Now that our texture has data in it, we need a way to use it. This is where a "),n("code",[t._v("TextureView")]),t._v(" and a "),n("code",[t._v("Sampler")]),t._v(" come in. A "),n("code",[t._v("TextureView")]),t._v(" offers us a "),n("em",[t._v("view")]),t._v(" into our texture. A "),n("code",[t._v("Sampler")]),t._v(" controls how the "),n("code",[t._v("Texture")]),t._v(" is "),n("em",[t._v("sampled")]),t._v(". Sampling works similar to the eyedropper tool in GIMP/Photoshop. Our program supplies a coordinate on the texture (known as a "),n("em",[t._v("texture coordinate")]),t._v("), and the sampler then returns the corresponding color based on the texture and some internal parameters.")]),t._v(" "),n("p",[t._v("Let's define our "),n("code",[t._v("diffuse_texture_view")]),t._v(" and "),n("code",[t._v("diffuse_sampler")]),t._v(" now:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need to configure the texture view much, so let's")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let wgpu define it.")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture_view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("address_mode_*")]),t._v(" parameters determine what to do if the sampler gets a texture coordinate that's outside of the texture itself. We have a few options to choose from:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("ClampToEdge")]),t._v(": Any texture coordinates outside the texture will return the color of the nearest pixel on the edges of the texture.")]),t._v(" "),n("li",[n("code",[t._v("Repeat")]),t._v(": The texture will repeat as texture coordinates exceed the textures dimensions.")]),t._v(" "),n("li",[n("code",[t._v("MirrorRepeat")]),t._v(": Similar to "),n("code",[t._v("Repeat")]),t._v(", but the image will flip when going over boundaries.")])]),t._v(" "),n("p",[n("img",{attrs:{src:a(205),alt:"address_mode.png"}})]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("mag_filter")]),t._v(" and "),n("code",[t._v("min_filter")]),t._v(" options describe what to do when a fragment covers multiple pixels, or there are multiple fragments for a single pixel. This often comes into play when viewing a surface from up close, or from far away.")]),t._v(" "),n("p",[t._v("There are 2 options:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("Linear")]),t._v(": Attempt to blend the in-between fragments so that they seem to flow together.")]),t._v(" "),n("li",[n("code",[t._v("Nearest")]),t._v(": In-between fragments will use the color of the nearest pixel. This creates an image that's crisper from far away, but pixelated up close. This can be desirable, however, if your textures are designed to be pixelated, like in pixel art games, or voxel games like Minecraft.")])]),t._v(" "),n("p",[t._v("Mipmaps are a complex topic, and will require "),n("a",{attrs:{href:"/todo"}},[t._v("their own section in the future")]),t._v(". For now, we can say that "),n("code",[t._v("mipmap_filter")]),t._v(" functions similar to "),n("code",[t._v("(mag/min)_filter")]),t._v(" as it tells the sampler how to blend between mipmaps.")]),t._v(" "),n("p",[t._v("I'm using some defaults for the other fields. If you want to see what they are, check "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.7.0/wgpu/struct.SamplerDescriptor.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("the wgpu docs"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("All these different resources are nice and all, but they don't do us much good if we can't plug them in anywhere. This is where "),n("code",[t._v("BindGroup")]),t._v("s and "),n("code",[t._v("PipelineLayout")]),t._v("s come in.")]),t._v(" "),n("h2",{attrs:{id:"the-bindgroup"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-bindgroup"}},[t._v("#")]),t._v(" The BindGroup")]),t._v(" "),n("p",[t._v("A "),n("code",[t._v("BindGroup")]),t._v(" describes a set of resources and how they can be accessed by a shader. We create a "),n("code",[t._v("BindGroup")]),t._v(" using a "),n("code",[t._v("BindGroupLayout")]),t._v(". Let's make one of those first.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    multisampled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    view_dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    sample_type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    comparison"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    filtering"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Our "),n("code",[t._v("texture_bind_group_layout")]),t._v(" has two entries: one for a sampled texture at binding 0, and one for a sampler at binding 1. Both of these bindings are visible only to the fragment shader as specified by "),n("code",[t._v("FRAGMENT")]),t._v(". The possible values for this field are any bitwise combination of "),n("code",[t._v("NONE")]),t._v(", "),n("code",[t._v("VERTEX")]),t._v(", "),n("code",[t._v("FRAGMENT")]),t._v(", or "),n("code",[t._v("COMPUTE")]),t._v(". Most of the time we'll only use "),n("code",[t._v("FRAGMENT")]),t._v(" for textures and samplers, but it's good to know what else is available.")]),t._v(" "),n("p",[t._v("With "),n("code",[t._v("texture_bind_group_layout")]),t._v(", we can now create our "),n("code",[t._v("BindGroup")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture_view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Looking at this you might get a bit of déjà vu! That's because a "),n("code",[t._v("BindGroup")]),t._v(" is a more specific declaration of the "),n("code",[t._v("BindGroupLayout")]),t._v(". The reason why they're separate is it allows us to swap out "),n("code",[t._v("BindGroup")]),t._v("s on the fly, so long as they all share the same "),n("code",[t._v("BindGroupLayout")]),t._v(". For each texture and sampler we create, we need to create its own "),n("code",[t._v("BindGroup")]),t._v(".")]),t._v(" "),n("p",[t._v("Now that we have our "),n("code",[t._v("diffuse_bind_group")]),t._v(", let's add it to our "),n("code",[t._v("State")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChainDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    num_indicies"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And make sure we return these fields in the "),n("code",[t._v("new")]),t._v(" method:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n            diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we've got our "),n("code",[t._v("BindGroup")]),t._v(", we can use it in our "),n("code",[t._v("render()")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"pipelinelayout"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#pipelinelayout"}},[t._v("#")]),t._v(" PipelineLayout")]),t._v(" "),n("p",[t._v("Remember the "),n("code",[t._v("PipelineLayout")]),t._v(" we created back in "),n("a",{attrs:{href:"/beginner/tutorial3-pipeline#how-do-we-use-the-shaders"}},[t._v("the pipeline section")]),t._v("? Now we finally get to use it! The "),n("code",[t._v("PipelineLayout")]),t._v(" contains a list of "),n("code",[t._v("BindGroupLayout")]),t._v("s that the pipeline can use. Modify "),n("code",[t._v("render_pipeline_layout")]),t._v(" to use our "),n("code",[t._v("texture_bind_group_layout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n            bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n            push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"a-change-to-the-vertices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-change-to-the-vertices"}},[t._v("#")]),t._v(" A change to the VERTICES")]),t._v(" "),n("p",[t._v("There's a few things we need to change about our "),n("code",[t._v("Vertex")]),t._v(" definition. Up to now we've been using a "),n("code",[t._v("color")]),t._v(" attribute to set the color of our mesh. Now that we're using a texture, we want to replace our "),n("code",[t._v("color")]),t._v(" with "),n("code",[t._v("tex_coords")]),t._v(". These coordinates will then be passed to the "),n("code",[t._v("Sampler")]),t._v(" to retrieve the appropriate color.")]),t._v(" "),n("p",[t._v("Since our "),n("code",[t._v("tex_coords")]),t._v(" are two dimensional, we'll change the field to take two floats instead of three.")]),t._v(" "),n("p",[t._v("First, we'll change the "),n("code",[t._v("Vertex")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then reflect these changes in the "),n("code",[t._v("VertexBufferLayout")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Lastly we need to change "),n("code",[t._v("VERTICES")]),t._v(" itself. Replace the existing definition with the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.99240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.56958646")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.050602943")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.15267089")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.7347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"shader-time"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shader-time"}},[t._v("#")]),t._v(" Shader time")]),t._v(" "),n("p",[t._v("With our new "),n("code",[t._v("Vertex")]),t._v(" structure in place it's time to update our shaders. We'll first need to pass our "),n("code",[t._v("tex_coords")]),t._v(" into the vertex shader and then use them over to our fragment shader to get the final color from the "),n("code",[t._v("Sampler")]),t._v(". Let's start with the vertex shader:")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\n\nstruct VertexInput {\n    [[location(0)]] position: vec3<f32>;\n    [[location(1)]] tex_coords: vec2<f32>;\n};\n\nstruct VertexOutput {\n    [[builtin(position)]] clip_position: vec4<f32>;\n    [[location(0)]] tex_coords: vec2<f32>;\n};\n\n[[stage(vertex)]]\nfn main(\n    model: VertexInput,\n) -> VertexOutput {\n    var out: VertexOutput;\n    out.tex_coords = model.tex_coords;\n    out.clip_position = vec4<f32>(model.position, 1.0);\n    return out;\n}\n")])])]),n("p",[t._v("Now that we have our vertex shader outputting our "),n("code",[t._v("tex_coords")]),t._v(", we need to change the fragment shader to take them in. With these coordinates, we'll finally be able to use our sampler to get a color from our texture.")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nvar t_diffuse"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" texture_2d"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nvar s_diffuse"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nfn "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexOutput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("textureSample")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The variables "),n("code",[t._v("t_diffuse")]),t._v(" and "),n("code",[t._v("s_diffuse")]),t._v(" are what's known as uniforms. We'll go over uniforms more in the "),n("RouterLink",{attrs:{to:"/beginner/tutorial6-uniforms/"}},[t._v("cameras section")]),t._v(". For now, all we need to know is that "),n("code",[t._v("group()")]),t._v(" corresponds to the 1st parameter in "),n("code",[t._v("set_bind_group()")]),t._v(" and "),n("code",[t._v("binding()")]),t._v(" relates to the "),n("code",[t._v("binding")]),t._v(" specified when we created the "),n("code",[t._v("BindGroupLayout")]),t._v(" and "),n("code",[t._v("BindGroup")]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"the-results"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-results"}},[t._v("#")]),t._v(" The results")]),t._v(" "),n("p",[t._v("If we run our program now we should get the following result:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(206),alt:"an upside down tree on a hexagon"}})]),t._v(" "),n("p",[t._v("That's weird, our tree is upside down! This is because wgpu's world coordinates have the y-axis pointing up, while texture coordinates have the y-axis pointing down. In other words, (0, 0) in texture coordinates coresponds to the top-left of the image, while (1, 1) is the bottom right.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(207),alt:"happy-tree-uv-coords.png"}})]),t._v(" "),n("p",[t._v("We can get our triangle right-side up by inverting the y coordinate of each texture coordinate:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.00759614")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.43041354")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.949397057")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.84732911")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2652641")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With that in place, we now have our tree right-side up on our hexagon:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(208),alt:"our happy tree as it should be"}})]),t._v(" "),n("h2",{attrs:{id:"cleaning-things-up"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-things-up"}},[t._v("#")]),t._v(" Cleaning things up")]),t._v(" "),n("p",[t._v("For convenience sake, let's pull our texture code into its module. We'll first need to add the "),n("a",{attrs:{href:"https://docs.rs/anyhow/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),n("OutboundLink")],1),t._v(" crate to our "),n("code",[t._v("Cargo.toml")]),t._v(" file to simplify error handling;")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.24"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.8"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("futures")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.6"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v(" // NEW!\n")])])]),n("p",[t._v("Then, in a new file called "),n("code",[t._v("src/texture.rs")]),t._v(", add the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAMPLED")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        \n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Note that we're returning a "),n("code",[t._v("CommandBuffer")]),t._v(" with our texture. This means we can load multiple textures at the same time, and then submit all their command buffers at once.")]),t._v(" "),n("p",[t._v("We need to import "),n("code",[t._v("texture.rs")]),t._v(" as a module, so somewhere at the top of "),n("code",[t._v("main.rs")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The texture creation code in "),n("code",[t._v("new()")]),t._v(" now gets a lot simpler:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" swap_chain "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_swap_chain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Everything up until `let texture_bind_group_layout = ...` can now be removed.")]),t._v("\n")])])]),n("p",[t._v("We still need to store the bind group separately so that "),n("code",[t._v("Texture")]),t._v(" doesn't need know how the "),n("code",[t._v("BindGroup")]),t._v(" is laid out. Creating the "),n("code",[t._v("diffuse_bind_group")]),t._v(" changes slightly to use the "),n("code",[t._v("view")]),t._v(" and "),n("code",[t._v("sampler")]),t._v(" fields of our "),n("code",[t._v("diffuse_texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Finally, let's update our "),n("code",[t._v("State")]),t._v(" field to use our shiny new "),n("code",[t._v("Texture")]),t._v(" struct, as we'll need it in future tutorials.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n            num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Phew!")]),t._v(" "),n("p",[t._v("With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create another texture and swap it out when you press the space key.")]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/assets/js/app.0804b831.js b/assets/js/app.9c6f1f55.js
similarity index 99%
rename from assets/js/app.0804b831.js
rename to assets/js/app.9c6f1f55.js
index ede207ed..4aa2b9bb 100644
--- a/assets/js/app.0804b831.js
+++ b/assets/js/app.9c6f1f55.js
@@ -1,4 +1,4 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,s=e[0],c=e[1],u=e[2],f=0,p=[];f<s.length;f++)a=s[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(t[r]=c[r]);for(l&&l(e);p.length;)p.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var t,e=0;e<i.length;e++){for(var n=i[e],r=!0,s=1;s<n.length;s++){var c=n[s];0!==o[c]&&(r=!1)}r&&(i.splice(e--,1),t=a(a.s=n[0]))}return t}var r={},o={1:0},i=[];function a(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(t){var e=[],n=o[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=o[t]=[e,r]}));e.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,a.nc&&s.setAttribute("nonce",a.nc),s.src=function(t){return a.p+"assets/js/"+({}[t]||t)+"."+{2:"da3fd46f",3:"04fce8d9",4:"e8a1e0e3",5:"f132d94f",6:"c24f582f",7:"88810c81",8:"999a7276",9:"ecb6e79c",10:"de8cadfb",11:"49298413",12:"2c105f9d",13:"6e25613a",14:"5de4d28c",15:"1153a1ff",16:"251e2e26",17:"5924bde1",18:"a965e3f2",19:"bee0cfc3",20:"17c44988",21:"bc3bd057",22:"2132e362",23:"1a88f225",24:"b71fce5a",25:"6d8e4b74",26:"745a2634",27:"04f788d9",28:"a3ac06e2",29:"281013fa",30:"dc887be9"}[t]+".js"}(t);var c=new Error;i=function(e){s.onerror=s.onload=null,clearTimeout(u);var n=o[t];if(0!==n){if(n){var r=e&&("load"===e.type?"missing":e.type),i=e&&e.target&&e.target.src;c.message="Loading chunk "+t+" failed.\n("+r+": "+i+")",c.name="ChunkLoadError",c.type=r,c.request=i,n[1](c)}o[t]=void 0}};var u=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return Promise.all(e)},a.m=t,a.c=r,a.d=function(t,e,n){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(t,e){if(1&e&&(t=a(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)a.d(n,r,function(e){return t[e]}.bind(null,r));return n},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="/learn-wgpu/",a.oe=function(t){throw console.error(t),t};var s=window.webpackJsonp=window.webpackJsonp||[],c=s.push.bind(s);s.push=e,s=s.slice();for(var u=0;u<s.length;u++)e(s[u]);var l=c;i.push([119,0]),n()}([function(t,e,n){var r=n(3),o=n(19).f,i=n(9),a=n(11),s=n(53),c=n(78),u=n(49);t.exports=function(t,e){var n,l,f,p,d,h=t.target,v=t.global,m=t.stat;if(n=v?r:m?r[h]||s(h,{}):(r[h]||{}).prototype)for(l in e){if(p=e[l],f=t.noTargetGet?(d=o(n,l))&&d.value:n[l],!u(v?l:h+(m?".":"#")+l,t.forced)&&void 0!==f){if(typeof p==typeof f)continue;c(p,f)}(t.sham||f&&f.sham)&&i(p,"sham",!0),a(n,l,p,t)}}},function(t,e,n){var r=n(3),o=n(54),i=n(5),a=n(36),s=n(58),c=n(85),u=o("wks"),l=r.Symbol,f=c?l:l&&l.withoutSetter||a;t.exports=function(t){return i(u,t)||(s&&i(l,t)?u[t]=l[t]:u[t]=f("Symbol."+t)),u[t]}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof global&&global)||Function("return this")()},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(2);t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(t,e,n){var r=n(6),o=n(74),i=n(8),a=n(25),s=Object.defineProperty;e.f=r?s:function(t,e,n){if(i(t),e=a(e,!0),i(n),o)try{return s(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},function(t,e,n){var r=n(6),o=n(7),i=n(24);t.exports=r?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){"use strict";function r(t,e,n,r,o,i,a,s){var c,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):o&&(c=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(t,e){return c.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:u}}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(3),o=n(9),i=n(5),a=n(53),s=n(76),c=n(23),u=c.get,l=c.enforce,f=String(String).split("String");(t.exports=function(t,e,n,s){var c=!!s&&!!s.unsafe,u=!!s&&!!s.enumerable,p=!!s&&!!s.noTargetGet;"function"==typeof n&&("string"!=typeof e||i(n,"name")||o(n,"name",e),l(n).source=f.join("string"==typeof e?e:"")),t!==r?(c?!p&&t[e]&&(u=!0):delete t[e],u?t[e]=n:o(t,e,n)):u?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&u(this).source||s(this)}))},function(t,e,n){var r=n(37),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(48),o=n(16);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(16);t.exports=function(t){return Object(r(t))}},function(t,e,n){var r=n(6),o=n(2),i=n(5),a=Object.defineProperty,s={},c=function(t){throw t};t.exports=function(t,e){if(i(s,t))return s[t];e||(e={});var n=[][t],u=!!i(e,"ACCESSORS")&&e.ACCESSORS,l=i(e,0)?e[0]:c,f=i(e,1)?e[1]:void 0;return s[t]=!!n&&!o((function(){if(u&&!r)return!0;var t={length:-1};u?a(t,1,{enumerable:!0,get:c}):t[1]=1,n.call(t,l,f)}))}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(60),o=n(11),i=n(121);r||o(Object.prototype,"toString",i,{unsafe:!0})},function(t,e,n){"use strict";var r=n(0),o=n(29).filter,i=n(38),a=n(15),s=i("filter"),c=a("filter");r({target:"Array",proto:!0,forced:!s||!c},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(6),o=n(73),i=n(24),a=n(13),s=n(25),c=n(5),u=n(74),l=Object.getOwnPropertyDescriptor;e.f=r?l:function(t,e){if(t=a(t),e=s(e,!0),u)try{return l(t,e)}catch(t){}if(c(t,e))return i(!o.f.call(t,e),t[e])}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r,o=n(8),i=n(123),a=n(56),s=n(27),c=n(124),u=n(75),l=n(35),f=l("IE_PROTO"),p=function(){},d=function(t){return"<script>"+t+"<\/script>"},h=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(t){}var t,e;h=r?function(t){t.write(d("")),t.close();var e=t.parentWindow.Object;return t=null,e}(r):((e=u("iframe")).style.display="none",c.appendChild(e),e.src=String("javascript:"),(t=e.contentWindow.document).open(),t.write(d("document.F=Object")),t.close(),t.F);for(var n=a.length;n--;)delete h.prototype[a[n]];return h()};s[f]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(p.prototype=o(t),n=new p,p.prototype=null,n[f]=t):n=h(),void 0===e?n:i(n,e)}},function(t,e,n){"use strict";var r=n(0),o=n(52);r({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(t,e,n){var r,o,i,a=n(120),s=n(3),c=n(4),u=n(9),l=n(5),f=n(35),p=n(27),d=s.WeakMap;if(a){var h=new d,v=h.get,m=h.has,g=h.set;r=function(t,e){return g.call(h,t,e),e},o=function(t){return v.call(h,t)||{}},i=function(t){return m.call(h,t)}}else{var y=f("state");p[y]=!0,r=function(t,e){return u(t,y,e),e},o=function(t){return l(t,y)?t[y]:{}},i=function(t){return l(t,y)}}t.exports={set:r,get:o,has:i,enforce:function(t){return i(t)?o(t):r(t,{})},getterFor:function(t){return function(e){var n;if(!c(e)||(n=o(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=!1},function(t,e){t.exports={}},function(t,e,n){var r=n(80),o=n(3),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},function(t,e,n){var r=n(57),o=n(48),i=n(14),a=n(12),s=n(84),c=[].push,u=function(t){var e=1==t,n=2==t,u=3==t,l=4==t,f=6==t,p=5==t||f;return function(d,h,v,m){for(var g,y,b=i(d),w=o(b),_=r(h,v,3),x=a(w.length),S=0,E=m||s,O=e?E(d,x):n?E(d,0):void 0;x>S;S++)if((p||S in w)&&(y=_(g=w[S],S,b),t))if(e)O[S]=y;else if(y)switch(t){case 3:return!0;case 5:return g;case 6:return S;case 2:c.call(O,g)}else if(l)return!1;return f?-1:u||l?l:O}};t.exports={forEach:u(0),map:u(1),filter:u(2),some:u(3),every:u(4),find:u(5),findIndex:u(6)}},function(t,e){t.exports={}},function(t,e,n){"use strict";var r=n(2);t.exports=function(t,e){var n=[][t];return!!n&&r((function(){n.call(null,e||function(){throw 1},1)}))}},function(t,e,n){var r=n(81),o=n(56).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){var r=n(20);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(0),o=n(4),i=n(33),a=n(82),s=n(12),c=n(13),u=n(59),l=n(1),f=n(38),p=n(15),d=f("slice"),h=p("slice",{ACCESSORS:!0,0:0,1:2}),v=l("species"),m=[].slice,g=Math.max;r({target:"Array",proto:!0,forced:!d||!h},{slice:function(t,e){var n,r,l,f=c(this),p=s(f.length),d=a(t,p),h=a(void 0===e?p:e,p);if(i(f)&&("function"!=typeof(n=f.constructor)||n!==Array&&!i(n.prototype)?o(n)&&null===(n=n[v])&&(n=void 0):n=void 0,n===Array||void 0===n))return m.call(f,d,h);for(r=new(void 0===n?Array:n)(g(h-d,0)),l=0;d<h;d++,l++)d in f&&u(r,l,f[d]);return r.length=l,r}})},function(t,e,n){var r=n(54),o=n(36),i=r("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++n+r).toString(36)}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(2),o=n(1),i=n(86),a=o("species");t.exports=function(t){return i>=51||!r((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},function(t,e,n){var r=n(7).f,o=n(5),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function o(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}n.d(e,"a",(function(){return o}))},function(t,e){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,a=parseInt,s="object"==typeof global&&global&&global.Object===Object&&global,c="object"==typeof self&&self&&self.Object===Object&&self,u=s||c||Function("return this")(),l=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return u.Date.now()};function h(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function v(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==l.call(t)}(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var s=o.test(t);return s||i.test(t)?a(t.slice(2),s?2:8):r.test(t)?NaN:+t}t.exports=function(t,e,n){var r,o,i,a,s,c,u=0,l=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=r,i=o;return r=o=void 0,u=e,a=t.apply(i,n)}function b(t){return u=t,s=setTimeout(_,e),l?y(t):a}function w(t){var n=t-c;return void 0===c||n>=e||n<0||m&&t-u>=i}function _(){var t=d();if(w(t))return x(t);s=setTimeout(_,function(t){var n=e-(t-c);return m?p(n,i-(t-u)):n}(t))}function x(t){return s=void 0,g&&r?y(t):(r=o=void 0,a)}function S(){var t=d(),n=w(t);if(r=arguments,o=this,c=t,n){if(void 0===s)return b(c);if(m)return s=setTimeout(_,e),y(c)}return void 0===s&&(s=setTimeout(_,e)),a}return e=v(e)||0,h(n)&&(l=!!n.leading,i=(m="maxWait"in n)?f(v(n.maxWait)||0,e):i,g="trailing"in n?!!n.trailing:g),S.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=c=o=s=void 0},S.flush=function(){return void 0===s?a:x(d())},S}},function(t,e,n){var r,o;
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,s=e[0],c=e[1],u=e[2],f=0,p=[];f<s.length;f++)a=s[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(t[r]=c[r]);for(l&&l(e);p.length;)p.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var t,e=0;e<i.length;e++){for(var n=i[e],r=!0,s=1;s<n.length;s++){var c=n[s];0!==o[c]&&(r=!1)}r&&(i.splice(e--,1),t=a(a.s=n[0]))}return t}var r={},o={1:0},i=[];function a(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(t){var e=[],n=o[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=o[t]=[e,r]}));e.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,a.nc&&s.setAttribute("nonce",a.nc),s.src=function(t){return a.p+"assets/js/"+({}[t]||t)+"."+{2:"da3fd46f",3:"04fce8d9",4:"e8a1e0e3",5:"eb0df1ad",6:"c24f582f",7:"88810c81",8:"999a7276",9:"ecb6e79c",10:"de8cadfb",11:"49298413",12:"2c18a516",13:"6e25613a",14:"5de4d28c",15:"1153a1ff",16:"251e2e26",17:"5924bde1",18:"a965e3f2",19:"bee0cfc3",20:"17c44988",21:"bc3bd057",22:"2132e362",23:"1a88f225",24:"b71fce5a",25:"6d8e4b74",26:"745a2634",27:"04f788d9",28:"a3ac06e2",29:"281013fa",30:"dc887be9"}[t]+".js"}(t);var c=new Error;i=function(e){s.onerror=s.onload=null,clearTimeout(u);var n=o[t];if(0!==n){if(n){var r=e&&("load"===e.type?"missing":e.type),i=e&&e.target&&e.target.src;c.message="Loading chunk "+t+" failed.\n("+r+": "+i+")",c.name="ChunkLoadError",c.type=r,c.request=i,n[1](c)}o[t]=void 0}};var u=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return Promise.all(e)},a.m=t,a.c=r,a.d=function(t,e,n){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(t,e){if(1&e&&(t=a(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)a.d(n,r,function(e){return t[e]}.bind(null,r));return n},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="/learn-wgpu/",a.oe=function(t){throw console.error(t),t};var s=window.webpackJsonp=window.webpackJsonp||[],c=s.push.bind(s);s.push=e,s=s.slice();for(var u=0;u<s.length;u++)e(s[u]);var l=c;i.push([119,0]),n()}([function(t,e,n){var r=n(3),o=n(19).f,i=n(9),a=n(11),s=n(53),c=n(78),u=n(49);t.exports=function(t,e){var n,l,f,p,d,h=t.target,v=t.global,m=t.stat;if(n=v?r:m?r[h]||s(h,{}):(r[h]||{}).prototype)for(l in e){if(p=e[l],f=t.noTargetGet?(d=o(n,l))&&d.value:n[l],!u(v?l:h+(m?".":"#")+l,t.forced)&&void 0!==f){if(typeof p==typeof f)continue;c(p,f)}(t.sham||f&&f.sham)&&i(p,"sham",!0),a(n,l,p,t)}}},function(t,e,n){var r=n(3),o=n(54),i=n(5),a=n(36),s=n(58),c=n(85),u=o("wks"),l=r.Symbol,f=c?l:l&&l.withoutSetter||a;t.exports=function(t){return i(u,t)||(s&&i(l,t)?u[t]=l[t]:u[t]=f("Symbol."+t)),u[t]}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof global&&global)||Function("return this")()},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(2);t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(t,e,n){var r=n(6),o=n(74),i=n(8),a=n(25),s=Object.defineProperty;e.f=r?s:function(t,e,n){if(i(t),e=a(e,!0),i(n),o)try{return s(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},function(t,e,n){var r=n(6),o=n(7),i=n(24);t.exports=r?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){"use strict";function r(t,e,n,r,o,i,a,s){var c,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):o&&(c=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(t,e){return c.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:u}}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(3),o=n(9),i=n(5),a=n(53),s=n(76),c=n(23),u=c.get,l=c.enforce,f=String(String).split("String");(t.exports=function(t,e,n,s){var c=!!s&&!!s.unsafe,u=!!s&&!!s.enumerable,p=!!s&&!!s.noTargetGet;"function"==typeof n&&("string"!=typeof e||i(n,"name")||o(n,"name",e),l(n).source=f.join("string"==typeof e?e:"")),t!==r?(c?!p&&t[e]&&(u=!0):delete t[e],u?t[e]=n:o(t,e,n)):u?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&u(this).source||s(this)}))},function(t,e,n){var r=n(37),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(48),o=n(16);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(16);t.exports=function(t){return Object(r(t))}},function(t,e,n){var r=n(6),o=n(2),i=n(5),a=Object.defineProperty,s={},c=function(t){throw t};t.exports=function(t,e){if(i(s,t))return s[t];e||(e={});var n=[][t],u=!!i(e,"ACCESSORS")&&e.ACCESSORS,l=i(e,0)?e[0]:c,f=i(e,1)?e[1]:void 0;return s[t]=!!n&&!o((function(){if(u&&!r)return!0;var t={length:-1};u?a(t,1,{enumerable:!0,get:c}):t[1]=1,n.call(t,l,f)}))}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(60),o=n(11),i=n(121);r||o(Object.prototype,"toString",i,{unsafe:!0})},function(t,e,n){"use strict";var r=n(0),o=n(29).filter,i=n(38),a=n(15),s=i("filter"),c=a("filter");r({target:"Array",proto:!0,forced:!s||!c},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(6),o=n(73),i=n(24),a=n(13),s=n(25),c=n(5),u=n(74),l=Object.getOwnPropertyDescriptor;e.f=r?l:function(t,e){if(t=a(t),e=s(e,!0),u)try{return l(t,e)}catch(t){}if(c(t,e))return i(!o.f.call(t,e),t[e])}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r,o=n(8),i=n(123),a=n(56),s=n(27),c=n(124),u=n(75),l=n(35),f=l("IE_PROTO"),p=function(){},d=function(t){return"<script>"+t+"<\/script>"},h=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(t){}var t,e;h=r?function(t){t.write(d("")),t.close();var e=t.parentWindow.Object;return t=null,e}(r):((e=u("iframe")).style.display="none",c.appendChild(e),e.src=String("javascript:"),(t=e.contentWindow.document).open(),t.write(d("document.F=Object")),t.close(),t.F);for(var n=a.length;n--;)delete h.prototype[a[n]];return h()};s[f]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(p.prototype=o(t),n=new p,p.prototype=null,n[f]=t):n=h(),void 0===e?n:i(n,e)}},function(t,e,n){"use strict";var r=n(0),o=n(52);r({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(t,e,n){var r,o,i,a=n(120),s=n(3),c=n(4),u=n(9),l=n(5),f=n(35),p=n(27),d=s.WeakMap;if(a){var h=new d,v=h.get,m=h.has,g=h.set;r=function(t,e){return g.call(h,t,e),e},o=function(t){return v.call(h,t)||{}},i=function(t){return m.call(h,t)}}else{var y=f("state");p[y]=!0,r=function(t,e){return u(t,y,e),e},o=function(t){return l(t,y)?t[y]:{}},i=function(t){return l(t,y)}}t.exports={set:r,get:o,has:i,enforce:function(t){return i(t)?o(t):r(t,{})},getterFor:function(t){return function(e){var n;if(!c(e)||(n=o(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=!1},function(t,e){t.exports={}},function(t,e,n){var r=n(80),o=n(3),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},function(t,e,n){var r=n(57),o=n(48),i=n(14),a=n(12),s=n(84),c=[].push,u=function(t){var e=1==t,n=2==t,u=3==t,l=4==t,f=6==t,p=5==t||f;return function(d,h,v,m){for(var g,y,b=i(d),w=o(b),_=r(h,v,3),x=a(w.length),S=0,E=m||s,O=e?E(d,x):n?E(d,0):void 0;x>S;S++)if((p||S in w)&&(y=_(g=w[S],S,b),t))if(e)O[S]=y;else if(y)switch(t){case 3:return!0;case 5:return g;case 6:return S;case 2:c.call(O,g)}else if(l)return!1;return f?-1:u||l?l:O}};t.exports={forEach:u(0),map:u(1),filter:u(2),some:u(3),every:u(4),find:u(5),findIndex:u(6)}},function(t,e){t.exports={}},function(t,e,n){"use strict";var r=n(2);t.exports=function(t,e){var n=[][t];return!!n&&r((function(){n.call(null,e||function(){throw 1},1)}))}},function(t,e,n){var r=n(81),o=n(56).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){var r=n(20);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(0),o=n(4),i=n(33),a=n(82),s=n(12),c=n(13),u=n(59),l=n(1),f=n(38),p=n(15),d=f("slice"),h=p("slice",{ACCESSORS:!0,0:0,1:2}),v=l("species"),m=[].slice,g=Math.max;r({target:"Array",proto:!0,forced:!d||!h},{slice:function(t,e){var n,r,l,f=c(this),p=s(f.length),d=a(t,p),h=a(void 0===e?p:e,p);if(i(f)&&("function"!=typeof(n=f.constructor)||n!==Array&&!i(n.prototype)?o(n)&&null===(n=n[v])&&(n=void 0):n=void 0,n===Array||void 0===n))return m.call(f,d,h);for(r=new(void 0===n?Array:n)(g(h-d,0)),l=0;d<h;d++,l++)d in f&&u(r,l,f[d]);return r.length=l,r}})},function(t,e,n){var r=n(54),o=n(36),i=r("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++n+r).toString(36)}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(2),o=n(1),i=n(86),a=o("species");t.exports=function(t){return i>=51||!r((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},function(t,e,n){var r=n(7).f,o=n(5),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function o(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}n.d(e,"a",(function(){return o}))},function(t,e){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,a=parseInt,s="object"==typeof global&&global&&global.Object===Object&&global,c="object"==typeof self&&self&&self.Object===Object&&self,u=s||c||Function("return this")(),l=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return u.Date.now()};function h(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function v(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==l.call(t)}(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var s=o.test(t);return s||i.test(t)?a(t.slice(2),s?2:8):r.test(t)?NaN:+t}t.exports=function(t,e,n){var r,o,i,a,s,c,u=0,l=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=r,i=o;return r=o=void 0,u=e,a=t.apply(i,n)}function b(t){return u=t,s=setTimeout(_,e),l?y(t):a}function w(t){var n=t-c;return void 0===c||n>=e||n<0||m&&t-u>=i}function _(){var t=d();if(w(t))return x(t);s=setTimeout(_,function(t){var n=e-(t-c);return m?p(n,i-(t-u)):n}(t))}function x(t){return s=void 0,g&&r?y(t):(r=o=void 0,a)}function S(){var t=d(),n=w(t);if(r=arguments,o=this,c=t,n){if(void 0===s)return b(c);if(m)return s=setTimeout(_,e),y(c)}return void 0===s&&(s=setTimeout(_,e)),a}return e=v(e)||0,h(n)&&(l=!!n.leading,i=(m="maxWait"in n)?f(v(n.maxWait)||0,e):i,g="trailing"in n?!!n.trailing:g),S.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=c=o=s=void 0},S.flush=function(){return void 0===s?a:x(d())},S}},function(t,e,n){var r,o;
 /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
  * @license MIT */void 0===(o="function"==typeof(r=function(){var t,e,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(t,e,n){return t<e?e:t>n?n:t}function i(t){return 100*(-1+t)}n.configure=function(t){var e,n;for(e in t)void 0!==(n=t[e])&&t.hasOwnProperty(e)&&(r[e]=n);return this},n.status=null,n.set=function(t){var e=n.isStarted();t=o(t,r.minimum,1),n.status=1===t?null:t;var c=n.render(!e),u=c.querySelector(r.barSelector),l=r.speed,f=r.easing;return c.offsetWidth,a((function(e){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,function(t,e,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(t)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(t)+"%,0)"}:{"margin-left":i(t)+"%"}).transition="all "+e+"ms "+n,o}(t,l,f)),1===t?(s(c,{transition:"none",opacity:1}),c.offsetWidth,setTimeout((function(){s(c,{transition:"all "+l+"ms linear",opacity:0}),setTimeout((function(){n.remove(),e()}),l)}),l)):setTimeout(e,l)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var t=function(){setTimeout((function(){n.status&&(n.trickle(),t())}),r.trickleSpeed)};return r.trickle&&t(),this},n.done=function(t){return t||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(t){var e=n.status;return e?("number"!=typeof t&&(t=(1-e)*o(Math.random()*e,.1,.95)),e=o(e+t,0,.994),n.set(e)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},t=0,e=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===e&&n.start(),t++,e++,r.always((function(){0==--e?(t=0,n.done()):n.set((t-e)/t)})),this):this},n.render=function(t){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var e=document.createElement("div");e.id="nprogress",e.innerHTML=r.template;var o,a=e.querySelector(r.barSelector),c=t?"-100":i(n.status||0),l=document.querySelector(r.parent);return s(a,{transition:"all 0 linear",transform:"translate3d("+c+"%,0,0)"}),r.showSpinner||(o=e.querySelector(r.spinnerSelector))&&p(o),l!=document.body&&u(l,"nprogress-custom-parent"),l.appendChild(e),e},n.remove=function(){l(document.documentElement,"nprogress-busy"),l(document.querySelector(r.parent),"nprogress-custom-parent");var t=document.getElementById("nprogress");t&&p(t)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var t=document.body.style,e="WebkitTransform"in t?"Webkit":"MozTransform"in t?"Moz":"msTransform"in t?"ms":"OTransform"in t?"O":"";return e+"Perspective"in t?"translate3d":e+"Transform"in t?"translate":"margin"};var a=function(){var t=[];function e(){var n=t.shift();n&&n(e)}return function(n){t.push(n),1==t.length&&e()}}(),s=function(){var t=["Webkit","O","Moz","ms"],e={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(t,e){return e.toUpperCase()})),e[n]||(e[n]=function(e){var n=document.body.style;if(e in n)return e;for(var r,o=t.length,i=e.charAt(0).toUpperCase()+e.slice(1);o--;)if((r=t[o]+i)in n)return r;return e}(n))}function r(t,e,r){e=n(e),t.style[e]=r}return function(t,e){var n,o,i=arguments;if(2==i.length)for(n in e)void 0!==(o=e[n])&&e.hasOwnProperty(n)&&r(t,n,o);else r(t,i[1],i[2])}}();function c(t,e){return("string"==typeof t?t:f(t)).indexOf(" "+e+" ")>=0}function u(t,e){var n=f(t),r=n+e;c(n,e)||(t.className=r.substring(1))}function l(t,e){var n,r=f(t);c(t,e)&&(n=r.replace(" "+e+" "," "),t.className=n.substring(1,n.length-1))}function f(t){return(" "+(t.className||"")+" ").replace(/\s+/gi," ")}function p(t){t&&t.parentNode&&t.parentNode.removeChild(t)}return n})?r.call(e,n,e,t):r)||(t.exports=o)},function(t,e,n){"use strict";var r=n(0),o=n(29).map,i=n(38),a=n(15),s=i("map"),c=a("map");r({target:"Array",proto:!0,forced:!s||!c},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";var r=n(111),o=n(8),i=n(14),a=n(12),s=n(37),c=n(16),u=n(112),l=n(113),f=Math.max,p=Math.min,d=Math.floor,h=/\$([$&'`]|\d\d?|<[^>]*>)/g,v=/\$([$&'`]|\d\d?)/g;r("replace",2,(function(t,e,n,r){var m=r.REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE,g=r.REPLACE_KEEPS_$0,y=m?"$":"$0";return[function(n,r){var o=c(this),i=null==n?void 0:n[t];return void 0!==i?i.call(n,o,r):e.call(String(o),n,r)},function(t,r){if(!m&&g||"string"==typeof r&&-1===r.indexOf(y)){var i=n(e,t,this,r);if(i.done)return i.value}var c=o(t),d=String(this),h="function"==typeof r;h||(r=String(r));var v=c.global;if(v){var w=c.unicode;c.lastIndex=0}for(var _=[];;){var x=l(c,d);if(null===x)break;if(_.push(x),!v)break;""===String(x[0])&&(c.lastIndex=u(d,a(c.lastIndex),w))}for(var S,E="",O=0,k=0;k<_.length;k++){x=_[k];for(var C=String(x[0]),A=f(p(s(x.index),d.length),0),T=[],$=1;$<x.length;$++)T.push(void 0===(S=x[$])?S:String(S));var j=x.groups;if(h){var P=[C].concat(T,A,d);void 0!==j&&P.push(j);var L=String(r.apply(void 0,P))}else L=b(C,d,A,T,j,r);A>=O&&(E+=d.slice(O,A)+L,O=A+C.length)}return E+d.slice(O)}];function b(t,n,r,o,a,s){var c=r+t.length,u=o.length,l=v;return void 0!==a&&(a=i(a),l=h),e.call(s,l,(function(e,i){var s;switch(i.charAt(0)){case"$":return"$";case"&":return t;case"`":return n.slice(0,r);case"'":return n.slice(c);case"<":s=a[i.slice(1,-1)];break;default:var l=+i;if(0===l)return e;if(l>u){var f=d(l/10);return 0===f?e:f<=u?void 0===o[f-1]?i.charAt(1):o[f-1]+i.charAt(1):e}s=o[l-1]}return void 0===s?"":s}))}}))},function(t,e,n){var r=n(2),o=n(20),i="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?i.call(t,""):Object(t)}:Object},function(t,e,n){var r=n(2),o=/#|\.prototype\./,i=function(t,e){var n=s[a(t)];return n==u||n!=c&&("function"==typeof e?r(e):!!e)},a=i.normalize=function(t){return String(t).replace(o,".").toLowerCase()},s=i.data={},c=i.NATIVE="N",u=i.POLYFILL="P";t.exports=i},function(t,e,n){"use strict";var r=n(0),o=n(96);r({target:"Array",proto:!0,forced:[].forEach!=o},{forEach:o})},function(t,e,n){var r=n(3),o=n(93),i=n(96),a=n(9);for(var s in o){var c=r[s],u=c&&c.prototype;if(u&&u.forEach!==i)try{a(u,"forEach",i)}catch(t){u.forEach=i}}},function(t,e,n){"use strict";var r,o,i=n(109),a=n(115),s=RegExp.prototype.exec,c=String.prototype.replace,u=s,l=(r=/a/,o=/b*/g,s.call(r,"a"),s.call(o,"a"),0!==r.lastIndex||0!==o.lastIndex),f=a.UNSUPPORTED_Y||a.BROKEN_CARET,p=void 0!==/()??/.exec("")[1];(l||p||f)&&(u=function(t){var e,n,r,o,a=this,u=f&&a.sticky,d=i.call(a),h=a.source,v=0,m=t;return u&&(-1===(d=d.replace("y","")).indexOf("g")&&(d+="g"),m=String(t).slice(a.lastIndex),a.lastIndex>0&&(!a.multiline||a.multiline&&"\n"!==t[a.lastIndex-1])&&(h="(?: "+h+")",m=" "+m,v++),n=new RegExp("^(?:"+h+")",d)),p&&(n=new RegExp("^"+h+"$(?!\\s)",d)),l&&(e=a.lastIndex),r=s.call(u?n:a,m),u?r?(r.input=r.input.slice(v),r[0]=r[0].slice(v),r.index=a.lastIndex,a.lastIndex+=r[0].length):a.lastIndex=0:l&&r&&(a.lastIndex=a.global?r.index+r[0].length:e),p&&r&&r.length>1&&c.call(r[0],n,(function(){for(o=1;o<arguments.length-2;o++)void 0===arguments[o]&&(r[o]=void 0)})),r}),t.exports=u},function(t,e,n){var r=n(3),o=n(9);t.exports=function(t,e){try{o(r,t,e)}catch(n){r[t]=e}return e}},function(t,e,n){var r=n(26),o=n(77);(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.6.5",mode:r?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},function(t,e,n){var r=n(13),o=n(12),i=n(82),a=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),l=i(a,u);if(t&&n!=n){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},function(t,e){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(t,e,n){var r=n(68);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 0:return function(){return t.call(e)};case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(2);t.exports=!!Object.getOwnPropertySymbols&&!r((function(){return!String(Symbol())}))},function(t,e,n){"use strict";var r=n(25),o=n(7),i=n(24);t.exports=function(t,e,n){var a=r(e);a in t?o.f(t,a,i(0,n)):t[a]=n}},function(t,e,n){var r={};r[n(1)("toStringTag")]="z",t.exports="[object z]"===String(r)},function(t,e,n){"use strict";var r=n(89).charAt,o=n(23),i=n(62),a=o.set,s=o.getterFor("String Iterator");i(String,"String",(function(t){a(this,{type:"String Iterator",string:String(t),index:0})}),(function(){var t,e=s(this),n=e.string,o=e.index;return o>=n.length?{value:void 0,done:!0}:(t=r(n,o),e.index+=t.length,{value:t,done:!1})}))},function(t,e,n){"use strict";var r=n(0),o=n(122),i=n(63),a=n(92),s=n(39),c=n(9),u=n(11),l=n(1),f=n(26),p=n(30),d=n(90),h=d.IteratorPrototype,v=d.BUGGY_SAFARI_ITERATORS,m=l("iterator"),g=function(){return this};t.exports=function(t,e,n,l,d,y,b){o(n,e,l);var w,_,x,S=function(t){if(t===d&&A)return A;if(!v&&t in k)return k[t];switch(t){case"keys":case"values":case"entries":return function(){return new n(this,t)}}return function(){return new n(this)}},E=e+" Iterator",O=!1,k=t.prototype,C=k[m]||k["@@iterator"]||d&&k[d],A=!v&&C||S(d),T="Array"==e&&k.entries||C;if(T&&(w=i(T.call(new t)),h!==Object.prototype&&w.next&&(f||i(w)===h||(a?a(w,h):"function"!=typeof w[m]&&c(w,m,g)),s(w,E,!0,!0),f&&(p[E]=g))),"values"==d&&C&&"values"!==C.name&&(O=!0,A=function(){return C.call(this)}),f&&!b||k[m]===A||c(k,m,A),p[e]=A,d)if(_={values:S("values"),keys:y?A:S("keys"),entries:S("entries")},b)for(x in _)(v||O||!(x in k))&&u(k,x,_[x]);else r({target:e,proto:!0,forced:v||O},_);return _}},function(t,e,n){var r=n(5),o=n(14),i=n(35),a=n(91),s=i("IE_PROTO"),c=Object.prototype;t.exports=a?Object.getPrototypeOf:function(t){return t=o(t),r(t,s)?t[s]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?c:null}},function(t,e,n){var r=n(81),o=n(56);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(3),o=n(93),i=n(126),a=n(9),s=n(1),c=s("iterator"),u=s("toStringTag"),l=i.values;for(var f in o){var p=r[f],d=p&&p.prototype;if(d){if(d[c]!==l)try{a(d,c,l)}catch(t){d[c]=l}if(d[u]||a(d,u,f),o[f])for(var h in i)if(d[h]!==i[h])try{a(d,h,i[h])}catch(t){d[h]=i[h]}}}},function(t,e,n){var r=n(27),o=n(4),i=n(5),a=n(7).f,s=n(36),c=n(97),u=s("meta"),l=0,f=Object.isExtensible||function(){return!0},p=function(t){a(t,u,{value:{objectID:"O"+ ++l,weakData:{}}})},d=t.exports={REQUIRED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,u)){if(!f(t))return"F";if(!e)return"E";p(t)}return t[u].objectID},getWeakData:function(t,e){if(!i(t,u)){if(!f(t))return!0;if(!e)return!1;p(t)}return t[u].weakData},onFreeze:function(t){return c&&d.REQUIRED&&f(t)&&!i(t,u)&&p(t),t}};r[u]=!0},function(t,e,n){var r=n(6),o=n(7).f,i=Function.prototype,a=i.toString,s=/^\s*function ([^ (]*)/;r&&!("name"in i)&&o(i,"name",{configurable:!0,get:function(){try{return a.call(this).match(s)[1]}catch(t){return""}}})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t}},function(t,e,n){var r=n(0),o=n(14),i=n(64);r({target:"Object",stat:!0,forced:n(2)((function(){i(1)}))},{keys:function(t){return i(o(t))}})},function(t,e,n){var r=n(4),o=n(92);t.exports=function(t,e,n){var i,a;return o&&"function"==typeof(i=e.constructor)&&i!==n&&r(a=i.prototype)&&a!==n.prototype&&o(t,a),t}},function(t,e,n){var r=n(16),o="["+n(72)+"]",i=RegExp("^"+o+o+"*"),a=RegExp(o+o+"*$"),s=function(t){return function(e){var n=String(r(e));return 1&t&&(n=n.replace(i,"")),2&t&&(n=n.replace(a,"")),n}};t.exports={start:s(1),end:s(2),trim:s(3)}},function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},function(t,e,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,i=o&&!r.call({1:2},1);e.f=i?function(t){var e=o(this,t);return!!e&&e.enumerable}:r},function(t,e,n){var r=n(6),o=n(2),i=n(75);t.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},function(t,e,n){var r=n(3),o=n(4),i=r.document,a=o(i)&&o(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},function(t,e,n){var r=n(77),o=Function.toString;"function"!=typeof r.inspectSource&&(r.inspectSource=function(t){return o.call(t)}),t.exports=r.inspectSource},function(t,e,n){var r=n(3),o=n(53),i=r["__core-js_shared__"]||o("__core-js_shared__",{});t.exports=i},function(t,e,n){var r=n(5),o=n(79),i=n(19),a=n(7);t.exports=function(t,e){for(var n=o(e),s=a.f,c=i.f,u=0;u<n.length;u++){var l=n[u];r(t,l)||s(t,l,c(e,l))}}},function(t,e,n){var r=n(28),o=n(32),i=n(83),a=n(8);t.exports=r("Reflect","ownKeys")||function(t){var e=o.f(a(t)),n=i.f;return n?e.concat(n(t)):e}},function(t,e,n){var r=n(3);t.exports=r},function(t,e,n){var r=n(5),o=n(13),i=n(55).indexOf,a=n(27);t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)!r(a,n)&&r(s,n)&&u.push(n);for(;e.length>c;)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},function(t,e,n){var r=n(37),o=Math.max,i=Math.min;t.exports=function(t,e){var n=r(t);return n<0?o(n+e,0):i(n,e)}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(4),o=n(33),i=n(1)("species");t.exports=function(t,e){var n;return o(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!o(n.prototype)?r(n)&&null===(n=n[i])&&(n=void 0):n=void 0),new(void 0===n?Array:n)(0===e?0:e)}},function(t,e,n){var r=n(58);t.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(t,e,n){var r,o,i=n(3),a=n(87),s=i.process,c=s&&s.versions,u=c&&c.v8;u?o=(r=u.split("."))[0]+r[1]:a&&(!(r=a.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/))&&(o=r[1]),t.exports=o&&+o},function(t,e,n){var r=n(28);t.exports=r("navigator","userAgent")||""},function(t,e,n){var r=n(60),o=n(20),i=n(1)("toStringTag"),a="Arguments"==o(function(){return arguments}());t.exports=r?o:function(t){var e,n,r;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),i))?n:a?o(e):"Object"==(r=o(e))&&"function"==typeof e.callee?"Arguments":r}},function(t,e,n){var r=n(37),o=n(16),i=function(t){return function(e,n){var i,a,s=String(o(e)),c=r(n),u=s.length;return c<0||c>=u?t?"":void 0:(i=s.charCodeAt(c))<55296||i>56319||c+1===u||(a=s.charCodeAt(c+1))<56320||a>57343?t?s.charAt(c):i:t?s.slice(c,c+2):a-56320+(i-55296<<10)+65536}};t.exports={codeAt:i(!1),charAt:i(!0)}},function(t,e,n){"use strict";var r,o,i,a=n(63),s=n(9),c=n(5),u=n(1),l=n(26),f=u("iterator"),p=!1;[].keys&&("next"in(i=[].keys())?(o=a(a(i)))!==Object.prototype&&(r=o):p=!0),null==r&&(r={}),l||c(r,f)||s(r,f,(function(){return this})),t.exports={IteratorPrototype:r,BUGGY_SAFARI_ITERATORS:p}},function(t,e,n){var r=n(2);t.exports=!r((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},function(t,e,n){var r=n(8),o=n(125);t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var t,e=!1,n={};try{(t=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(n,[]),e=n instanceof Array}catch(t){}return function(n,i){return r(n),o(i),e?t.call(n,i):n.__proto__=i,n}}():void 0)},function(t,e){t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},function(t,e,n){var r=n(1),o=n(21),i=n(7),a=r("unscopables"),s=Array.prototype;null==s[a]&&i.f(s,a,{configurable:!0,value:o(null)}),t.exports=function(t){s[a][t]=!0}},function(t,e,n){var r=function(t){"use strict";var e=Object.prototype,n=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",i=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function s(t,e,n,r){var o=e&&e.prototype instanceof l?e:l,i=Object.create(o.prototype),a=new x(r||[]);return i._invoke=function(t,e,n){var r="suspendedStart";return function(o,i){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===o)throw i;return E()}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var s=b(a,n);if(s){if(s===u)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var l=c(t,e,n);if("normal"===l.type){if(r=n.done?"completed":"suspendedYield",l.arg===u)continue;return{value:l.arg,done:n.done}}"throw"===l.type&&(r="completed",n.method="throw",n.arg=l.arg)}}}(t,n,a),i}function c(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var u={};function l(){}function f(){}function p(){}var d={};d[o]=function(){return this};var h=Object.getPrototypeOf,v=h&&h(h(S([])));v&&v!==e&&n.call(v,o)&&(d=v);var m=p.prototype=l.prototype=Object.create(d);function g(t){["next","throw","return"].forEach((function(e){t[e]=function(t){return this._invoke(e,t)}}))}function y(t,e){var r;this._invoke=function(o,i){function a(){return new e((function(r,a){!function r(o,i,a,s){var u=c(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return r("throw",t,a,s)}))}s(u.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function b(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,b(t,e),"throw"===e.method))return u;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return u}var r=c(n,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,u;var o=r.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,u):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,u)}function w(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function _(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function x(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(w,this),this.reset(!0)}function S(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:E}}function E(){return{value:void 0,done:!0}}return f.prototype=m.constructor=p,p.constructor=f,p[a]=f.displayName="GeneratorFunction",t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===f||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,a in t||(t[a]="GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},g(y.prototype),y.prototype[i]=function(){return this},t.AsyncIterator=y,t.async=function(e,n,r,o,i){void 0===i&&(i=Promise);var a=new y(s(e,n,r,o),i);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(m),m[a]="Generator",m[o]=function(){return this},m.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=S,x.prototype={constructor:x,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(_),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(n,r){return a.type="throw",a.arg=t,e.next=n,r&&(e.method="next",e.arg=void 0),!!r}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var s=n.call(i,"catchLoc"),c=n.call(i,"finallyLoc");if(s&&c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,u):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),u},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),_(n),u}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var o=r.arg;_(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:S(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),u}},t}(t.exports);try{regeneratorRuntime=r}catch(t){Function("r","regeneratorRuntime = r")(r)}},function(t,e,n){"use strict";var r=n(29).forEach,o=n(31),i=n(15),a=o("forEach"),s=i("forEach");t.exports=a&&s?[].forEach:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}},function(t,e,n){var r=n(2);t.exports=!r((function(){return Object.isExtensible(Object.preventExtensions({}))}))},function(t,e,n){var r=n(107);t.exports=function(t){if(r(t))throw TypeError("The method doesn't accept regular expressions");return t}},function(t,e,n){var r=n(1)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(n){try{return e[r]=!1,"/./"[t](e)}catch(t){}}return!1}},function(t,e,n){"use strict";var r=n(0),o=n(3),i=n(28),a=n(26),s=n(6),c=n(58),u=n(85),l=n(2),f=n(5),p=n(33),d=n(4),h=n(8),v=n(14),m=n(13),g=n(25),y=n(24),b=n(21),w=n(64),_=n(32),x=n(134),S=n(83),E=n(19),O=n(7),k=n(73),C=n(9),A=n(11),T=n(54),$=n(35),j=n(27),P=n(36),L=n(1),R=n(101),I=n(135),M=n(39),D=n(23),N=n(29).forEach,U=$("hidden"),B=L("toPrimitive"),F=D.set,W=D.getterFor("Symbol"),H=Object.prototype,V=o.Symbol,z=i("JSON","stringify"),G=E.f,q=O.f,Z=x.f,K=k.f,X=T("symbols"),Y=T("op-symbols"),J=T("string-to-symbol-registry"),Q=T("symbol-to-string-registry"),tt=T("wks"),et=o.QObject,nt=!et||!et.prototype||!et.prototype.findChild,rt=s&&l((function(){return 7!=b(q({},"a",{get:function(){return q(this,"a",{value:7}).a}})).a}))?function(t,e,n){var r=G(H,e);r&&delete H[e],q(t,e,n),r&&t!==H&&q(H,e,r)}:q,ot=function(t,e){var n=X[t]=b(V.prototype);return F(n,{type:"Symbol",tag:t,description:e}),s||(n.description=e),n},it=u?function(t){return"symbol"==typeof t}:function(t){return Object(t)instanceof V},at=function(t,e,n){t===H&&at(Y,e,n),h(t);var r=g(e,!0);return h(n),f(X,r)?(n.enumerable?(f(t,U)&&t[U][r]&&(t[U][r]=!1),n=b(n,{enumerable:y(0,!1)})):(f(t,U)||q(t,U,y(1,{})),t[U][r]=!0),rt(t,r,n)):q(t,r,n)},st=function(t,e){h(t);var n=m(e),r=w(n).concat(ft(n));return N(r,(function(e){s&&!ct.call(n,e)||at(t,e,n[e])})),t},ct=function(t){var e=g(t,!0),n=K.call(this,e);return!(this===H&&f(X,e)&&!f(Y,e))&&(!(n||!f(this,e)||!f(X,e)||f(this,U)&&this[U][e])||n)},ut=function(t,e){var n=m(t),r=g(e,!0);if(n!==H||!f(X,r)||f(Y,r)){var o=G(n,r);return!o||!f(X,r)||f(n,U)&&n[U][r]||(o.enumerable=!0),o}},lt=function(t){var e=Z(m(t)),n=[];return N(e,(function(t){f(X,t)||f(j,t)||n.push(t)})),n},ft=function(t){var e=t===H,n=Z(e?Y:m(t)),r=[];return N(n,(function(t){!f(X,t)||e&&!f(H,t)||r.push(X[t])})),r};(c||(A((V=function(){if(this instanceof V)throw TypeError("Symbol is not a constructor");var t=arguments.length&&void 0!==arguments[0]?String(arguments[0]):void 0,e=P(t),n=function(t){this===H&&n.call(Y,t),f(this,U)&&f(this[U],e)&&(this[U][e]=!1),rt(this,e,y(1,t))};return s&&nt&&rt(H,e,{configurable:!0,set:n}),ot(e,t)}).prototype,"toString",(function(){return W(this).tag})),A(V,"withoutSetter",(function(t){return ot(P(t),t)})),k.f=ct,O.f=at,E.f=ut,_.f=x.f=lt,S.f=ft,R.f=function(t){return ot(L(t),t)},s&&(q(V.prototype,"description",{configurable:!0,get:function(){return W(this).description}}),a||A(H,"propertyIsEnumerable",ct,{unsafe:!0}))),r({global:!0,wrap:!0,forced:!c,sham:!c},{Symbol:V}),N(w(tt),(function(t){I(t)})),r({target:"Symbol",stat:!0,forced:!c},{for:function(t){var e=String(t);if(f(J,e))return J[e];var n=V(e);return J[e]=n,Q[n]=e,n},keyFor:function(t){if(!it(t))throw TypeError(t+" is not a symbol");if(f(Q,t))return Q[t]},useSetter:function(){nt=!0},useSimple:function(){nt=!1}}),r({target:"Object",stat:!0,forced:!c,sham:!s},{create:function(t,e){return void 0===e?b(t):st(b(t),e)},defineProperty:at,defineProperties:st,getOwnPropertyDescriptor:ut}),r({target:"Object",stat:!0,forced:!c},{getOwnPropertyNames:lt,getOwnPropertySymbols:ft}),r({target:"Object",stat:!0,forced:l((function(){S.f(1)}))},{getOwnPropertySymbols:function(t){return S.f(v(t))}}),z)&&r({target:"JSON",stat:!0,forced:!c||l((function(){var t=V();return"[null]"!=z([t])||"{}"!=z({a:t})||"{}"!=z(Object(t))}))},{stringify:function(t,e,n){for(var r,o=[t],i=1;arguments.length>i;)o.push(arguments[i++]);if(r=e,(d(e)||void 0!==t)&&!it(t))return p(e)||(e=function(t,e){if("function"==typeof r&&(e=r.call(this,t,e)),!it(e))return e}),o[1]=e,z.apply(null,o)}});V.prototype[B]||C(V.prototype,B,V.prototype.valueOf),M(V,"Symbol"),j[U]=!0},function(t,e,n){var r=n(1);e.f=r},function(t,e,n){"use strict";var r=n(0),o=n(6),i=n(3),a=n(5),s=n(4),c=n(7).f,u=n(78),l=i.Symbol;if(o&&"function"==typeof l&&(!("description"in l.prototype)||void 0!==l().description)){var f={},p=function(){var t=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),e=this instanceof p?new l(t):void 0===t?l():l(t);return""===t&&(f[e]=!0),e};u(p,l);var d=p.prototype=l.prototype;d.constructor=p;var h=d.toString,v="Symbol(test)"==String(l("test")),m=/^Symbol\((.*)\)[^)]+$/;c(d,"description",{configurable:!0,get:function(){var t=s(this)?this.valueOf():this,e=h.call(t);if(a(f,t))return"";var n=v?e.slice(7,-1):e.replace(m,"$1");return""===n?void 0:n}}),r({global:!0,forced:!0},{Symbol:p})}},function(t,e,n){var r=n(8),o=n(138),i=n(12),a=n(57),s=n(139),c=n(140),u=function(t,e){this.stopped=t,this.result=e};(t.exports=function(t,e,n,l,f){var p,d,h,v,m,g,y,b=a(e,n,l?2:1);if(f)p=t;else{if("function"!=typeof(d=s(t)))throw TypeError("Target is not iterable");if(o(d)){for(h=0,v=i(t.length);v>h;h++)if((m=l?b(r(y=t[h])[0],y[1]):b(t[h]))&&m instanceof u)return m;return new u(!1)}p=d.call(t)}for(g=p.next;!(y=g.call(p)).done;)if("object"==typeof(m=c(p,b,y.value,l))&&m&&m instanceof u)return m;return new u(!1)}).stop=function(t){return new u(!0,t)}},function(t,e){t.exports=function(t,e,n){if(!(t instanceof e))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return t}},function(t,e,n){var r=n(0),o=n(3),i=n(87),a=[].slice,s=function(t){return function(e,n){var r=arguments.length>2,o=r?a.call(arguments,2):void 0;return t(r?function(){("function"==typeof e?e:Function(e)).apply(this,o)}:e,n)}};r({global:!0,bind:!0,forced:/MSIE .\./.test(i)},{setTimeout:s(o.setTimeout),setInterval:s(o.setInterval)})},function(t,e,n){"use strict";var r=n(0),o=n(29).some,i=n(31),a=n(15),s=i("some"),c=a("some");r({target:"Array",proto:!0,forced:!s||!c},{some:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(4),o=n(20),i=n(1)("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[i])?!!e:"RegExp"==o(t))}},function(t,e,n){"use strict";var r=n(0),o=n(55).includes,i=n(94);r({target:"Array",proto:!0,forced:!n(15)("indexOf",{ACCESSORS:!0,1:0})},{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),i("includes")},function(t,e,n){"use strict";var r=n(8);t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},function(t,e,n){"use strict";var r=n(0),o=n(98),i=n(16);r({target:"String",proto:!0,forced:!n(99)("includes")},{includes:function(t){return!!~String(i(this)).indexOf(o(t),arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";n(22);var r=n(11),o=n(2),i=n(1),a=n(52),s=n(9),c=i("species"),u=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),l="$0"==="a".replace(/./,"$0"),f=i("replace"),p=!!/./[f]&&""===/./[f]("a","$0"),d=!o((function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2!==n.length||"a"!==n[0]||"b"!==n[1]}));t.exports=function(t,e,n,f){var h=i(t),v=!o((function(){var e={};return e[h]=function(){return 7},7!=""[t](e)})),m=v&&!o((function(){var e=!1,n=/a/;return"split"===t&&((n={}).constructor={},n.constructor[c]=function(){return n},n.flags="",n[h]=/./[h]),n.exec=function(){return e=!0,null},n[h](""),!e}));if(!v||!m||"replace"===t&&(!u||!l||p)||"split"===t&&!d){var g=/./[h],y=n(h,""[t],(function(t,e,n,r,o){return e.exec===a?v&&!o?{done:!0,value:g.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}}),{REPLACE_KEEPS_$0:l,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:p}),b=y[0],w=y[1];r(String.prototype,t,b),r(RegExp.prototype,h,2==e?function(t,e){return w.call(t,this,e)}:function(t){return w.call(t,this)})}f&&s(RegExp.prototype[h],"sham",!0)}},function(t,e,n){"use strict";var r=n(89).charAt;t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){var r=n(20),o=n(52);t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var i=n.call(t,e);if("object"!=typeof i)throw TypeError("RegExp exec method returned something other than an Object or null");return i}if("RegExp"!==r(t))throw TypeError("RegExp#exec called on incompatible receiver");return o.call(t,e)}},function(t,e,n){"use strict";var r=n(0),o=n(55).indexOf,i=n(31),a=n(15),s=[].indexOf,c=!!s&&1/[1].indexOf(1,-0)<0,u=i("indexOf"),l=a("indexOf",{ACCESSORS:!0,1:0});r({target:"Array",proto:!0,forced:c||!u||!l},{indexOf:function(t){return c?s.apply(this,arguments)||0:o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";var r=n(2);function o(t,e){return RegExp(t,e)}e.UNSUPPORTED_Y=r((function(){var t=o("a","y");return t.lastIndex=2,null!=t.exec("abcd")})),e.BROKEN_CARET=r((function(){var t=o("^r","gy");return t.lastIndex=2,null!=t.exec("str")}))},function(t,e,n){"use strict";var r=n(28),o=n(7),i=n(1),a=n(6),s=i("species");t.exports=function(t){var e=r(t),n=o.f;a&&e&&!e[s]&&n(e,s,{configurable:!0,get:function(){return this}})}},function(t,e,n){"use strict";var r=n(0),o=n(2),i=n(33),a=n(4),s=n(14),c=n(12),u=n(59),l=n(84),f=n(38),p=n(1),d=n(86),h=p("isConcatSpreadable"),v=d>=51||!o((function(){var t=[];return t[h]=!1,t.concat()[0]!==t})),m=f("concat"),g=function(t){if(!a(t))return!1;var e=t[h];return void 0!==e?!!e:i(t)};r({target:"Array",proto:!0,forced:!v||!m},{concat:function(t){var e,n,r,o,i,a=s(this),f=l(a,0),p=0;for(e=-1,r=arguments.length;e<r;e++)if(i=-1===e?a:arguments[e],g(i)){if(p+(o=c(i.length))>9007199254740991)throw TypeError("Maximum allowed index exceeded");for(n=0;n<o;n++,p++)n in i&&u(f,p,i[n])}else{if(p>=9007199254740991)throw TypeError("Maximum allowed index exceeded");u(f,p++,i)}return f.length=p,f}})},function(t,e,n){var r=n(0),o=n(144);r({global:!0,forced:parseInt!=o},{parseInt:o})},function(t,e,n){t.exports=n(152)},function(t,e,n){var r=n(3),o=n(76),i=r.WeakMap;t.exports="function"==typeof i&&/native code/.test(o(i))},function(t,e,n){"use strict";var r=n(60),o=n(88);t.exports=r?{}.toString:function(){return"[object "+o(this)+"]"}},function(t,e,n){"use strict";var r=n(90).IteratorPrototype,o=n(21),i=n(24),a=n(39),s=n(30),c=function(){return this};t.exports=function(t,e,n){var u=e+" Iterator";return t.prototype=o(r,{next:i(1,n)}),a(t,u,!1,!0),s[u]=c,t}},function(t,e,n){var r=n(6),o=n(7),i=n(8),a=n(64);t.exports=r?Object.defineProperties:function(t,e){i(t);for(var n,r=a(e),s=r.length,c=0;s>c;)o.f(t,n=r[c++],e[n]);return t}},function(t,e,n){var r=n(28);t.exports=r("document","documentElement")},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t)&&null!==t)throw TypeError("Can't set "+String(t)+" as a prototype");return t}},function(t,e,n){"use strict";var r=n(13),o=n(94),i=n(30),a=n(23),s=n(62),c=a.set,u=a.getterFor("Array Iterator");t.exports=s(Array,"Array",(function(t,e){c(this,{type:"Array Iterator",target:r(t),index:0,kind:e})}),(function(){var t=u(this),e=t.target,n=t.kind,r=t.index++;return!e||r>=e.length?(t.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:r,done:!1}:"values"==n?{value:e[r],done:!1}:{value:[r,e[r]],done:!1}}),"values"),i.Arguments=i.Array,o("keys"),o("values"),o("entries")},function(t,e,n){"use strict";var r=n(0),o=n(128).left,i=n(31),a=n(15),s=i("reduce"),c=a("reduce",{1:0});r({target:"Array",proto:!0,forced:!s||!c},{reduce:function(t){return o(this,t,arguments.length,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(68),o=n(14),i=n(48),a=n(12),s=function(t){return function(e,n,s,c){r(n);var u=o(e),l=i(u),f=a(u.length),p=t?f-1:0,d=t?-1:1;if(s<2)for(;;){if(p in l){c=l[p],p+=d;break}if(p+=d,t?p<0:f<=p)throw TypeError("Reduce of empty array with no initial value")}for(;t?p>=0:f>p;p+=d)p in l&&(c=n(c,l[p],p,u));return c}};t.exports={left:s(!1),right:s(!0)}},function(t,e,n){var r=n(0),o=n(97),i=n(2),a=n(4),s=n(66).onFreeze,c=Object.freeze;r({target:"Object",stat:!0,forced:i((function(){c(1)})),sham:!o},{freeze:function(t){return c&&a(t)?c(s(t)):t}})},function(t,e,n){var r=n(0),o=n(6),i=n(79),a=n(13),s=n(19),c=n(59);r({target:"Object",stat:!0,sham:!o},{getOwnPropertyDescriptors:function(t){for(var e,n,r=a(t),o=s.f,u=i(r),l={},f=0;u.length>f;)void 0!==(n=o(r,e=u[f++]))&&c(l,e,n);return l}})},function(t,e,n){var r=n(0),o=n(2),i=n(14),a=n(63),s=n(91);r({target:"Object",stat:!0,forced:o((function(){a(1)})),sham:!s},{getPrototypeOf:function(t){return a(i(t))}})},function(t,e,n){"use strict";var r,o=n(0),i=n(19).f,a=n(12),s=n(98),c=n(16),u=n(99),l=n(26),f="".startsWith,p=Math.min,d=u("startsWith");o({target:"String",proto:!0,forced:!!(l||d||(r=i(String.prototype,"startsWith"),!r||r.writable))&&!d},{startsWith:function(t){var e=String(c(this));s(t);var n=a(p(arguments.length>1?arguments[1]:void 0,e.length)),r=String(t);return f?f.call(e,r,n):e.slice(n,n+r.length)===r}})},function(t,e,n){n(0)({target:"Object",stat:!0,sham:!n(6)},{create:n(21)})},function(t,e,n){var r=n(13),o=n(32).f,i={}.toString,a="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return a&&"[object Window]"==i.call(t)?function(t){try{return o(t)}catch(t){return a.slice()}}(t):o(r(t))}},function(t,e,n){var r=n(80),o=n(5),i=n(101),a=n(7).f;t.exports=function(t){var e=r.Symbol||(r.Symbol={});o(e,t)||a(e,t,{value:i.f(t)})}},function(t,e,n){"use strict";var r=n(137),o=n(142);t.exports=r("Set",(function(t){return function(){return t(this,arguments.length?arguments[0]:void 0)}}),o)},function(t,e,n){"use strict";var r=n(0),o=n(3),i=n(49),a=n(11),s=n(66),c=n(103),u=n(104),l=n(4),f=n(2),p=n(141),d=n(39),h=n(70);t.exports=function(t,e,n){var v=-1!==t.indexOf("Map"),m=-1!==t.indexOf("Weak"),g=v?"set":"add",y=o[t],b=y&&y.prototype,w=y,_={},x=function(t){var e=b[t];a(b,t,"add"==t?function(t){return e.call(this,0===t?0:t),this}:"delete"==t?function(t){return!(m&&!l(t))&&e.call(this,0===t?0:t)}:"get"==t?function(t){return m&&!l(t)?void 0:e.call(this,0===t?0:t)}:"has"==t?function(t){return!(m&&!l(t))&&e.call(this,0===t?0:t)}:function(t,n){return e.call(this,0===t?0:t,n),this})};if(i(t,"function"!=typeof y||!(m||b.forEach&&!f((function(){(new y).entries().next()})))))w=n.getConstructor(e,t,v,g),s.REQUIRED=!0;else if(i(t,!0)){var S=new w,E=S[g](m?{}:-0,1)!=S,O=f((function(){S.has(1)})),k=p((function(t){new y(t)})),C=!m&&f((function(){for(var t=new y,e=5;e--;)t[g](e,e);return!t.has(-0)}));k||((w=e((function(e,n){u(e,w,t);var r=h(new y,e,w);return null!=n&&c(n,r[g],r,v),r}))).prototype=b,b.constructor=w),(O||C)&&(x("delete"),x("has"),v&&x("get")),(C||E)&&x(g),m&&b.clear&&delete b.clear}return _[t]=w,r({global:!0,forced:w!=y},_),d(w,t),m||n.setStrong(w,t,v),w}},function(t,e,n){var r=n(1),o=n(30),i=r("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(o.Array===t||a[i]===t)}},function(t,e,n){var r=n(88),o=n(30),i=n(1)("iterator");t.exports=function(t){if(null!=t)return t[i]||t["@@iterator"]||o[r(t)]}},function(t,e,n){var r=n(8);t.exports=function(t,e,n,o){try{return o?e(r(n)[0],n[1]):e(n)}catch(e){var i=t.return;throw void 0!==i&&r(i.call(t)),e}}},function(t,e,n){var r=n(1)("iterator"),o=!1;try{var i=0,a={next:function(){return{done:!!i++}},return:function(){o=!0}};a[r]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var i={};i[r]=function(){return{next:function(){return{done:n=!0}}}},t(i)}catch(t){}return n}},function(t,e,n){"use strict";var r=n(7).f,o=n(21),i=n(143),a=n(57),s=n(104),c=n(103),u=n(62),l=n(116),f=n(6),p=n(66).fastKey,d=n(23),h=d.set,v=d.getterFor;t.exports={getConstructor:function(t,e,n,u){var l=t((function(t,r){s(t,l,e),h(t,{type:e,index:o(null),first:void 0,last:void 0,size:0}),f||(t.size=0),null!=r&&c(r,t[u],t,n)})),d=v(e),m=function(t,e,n){var r,o,i=d(t),a=g(t,e);return a?a.value=n:(i.last=a={index:o=p(e,!0),key:e,value:n,previous:r=i.last,next:void 0,removed:!1},i.first||(i.first=a),r&&(r.next=a),f?i.size++:t.size++,"F"!==o&&(i.index[o]=a)),t},g=function(t,e){var n,r=d(t),o=p(e);if("F"!==o)return r.index[o];for(n=r.first;n;n=n.next)if(n.key==e)return n};return i(l.prototype,{clear:function(){for(var t=d(this),e=t.index,n=t.first;n;)n.removed=!0,n.previous&&(n.previous=n.previous.next=void 0),delete e[n.index],n=n.next;t.first=t.last=void 0,f?t.size=0:this.size=0},delete:function(t){var e=d(this),n=g(this,t);if(n){var r=n.next,o=n.previous;delete e.index[n.index],n.removed=!0,o&&(o.next=r),r&&(r.previous=o),e.first==n&&(e.first=r),e.last==n&&(e.last=o),f?e.size--:this.size--}return!!n},forEach:function(t){for(var e,n=d(this),r=a(t,arguments.length>1?arguments[1]:void 0,3);e=e?e.next:n.first;)for(r(e.value,e.key,this);e&&e.removed;)e=e.previous},has:function(t){return!!g(this,t)}}),i(l.prototype,n?{get:function(t){var e=g(this,t);return e&&e.value},set:function(t,e){return m(this,0===t?0:t,e)}}:{add:function(t){return m(this,t=0===t?0:t,t)}}),f&&r(l.prototype,"size",{get:function(){return d(this).size}}),l},setStrong:function(t,e,n){var r=e+" Iterator",o=v(e),i=v(r);u(t,e,(function(t,e){h(this,{type:r,target:t,state:o(t),kind:e,last:void 0})}),(function(){for(var t=i(this),e=t.kind,n=t.last;n&&n.removed;)n=n.previous;return t.target&&(t.last=n=n?n.next:t.state.first)?"keys"==e?{value:n.key,done:!1}:"values"==e?{value:n.value,done:!1}:{value:[n.key,n.value],done:!1}:(t.target=void 0,{value:void 0,done:!0})}),n?"entries":"values",!n,!0),l(e)}}},function(t,e,n){var r=n(11);t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},function(t,e,n){var r=n(3),o=n(71).trim,i=n(72),a=r.parseInt,s=/^[+-]?0[Xx]/,c=8!==a(i+"08")||22!==a(i+"0x16");t.exports=c?function(t,e){var n=o(String(t));return a(n,e>>>0||(s.test(n)?16:10))}:a},function(t,e,n){"use strict";var r=n(40);n.n(r).a},function(t,e,n){},function(t,e,n){n(17),Promise.all([n.e(0),n.e(30)]).then(n.t.bind(null,153,7))},function(t,e,n){},function(t,e,n){"use strict";var r=n(6),o=n(3),i=n(49),a=n(11),s=n(5),c=n(20),u=n(70),l=n(25),f=n(2),p=n(21),d=n(32).f,h=n(19).f,v=n(7).f,m=n(71).trim,g=o.Number,y=g.prototype,b="Number"==c(p(y)),w=function(t){var e,n,r,o,i,a,s,c,u=l(t,!1);if("string"==typeof u&&u.length>2)if(43===(e=(u=m(u)).charCodeAt(0))||45===e){if(88===(n=u.charCodeAt(2))||120===n)return NaN}else if(48===e){switch(u.charCodeAt(1)){case 66:case 98:r=2,o=49;break;case 79:case 111:r=8,o=55;break;default:return+u}for(a=(i=u.slice(2)).length,s=0;s<a;s++)if((c=i.charCodeAt(s))<48||c>o)return NaN;return parseInt(i,r)}return+u};if(i("Number",!g(" 0o1")||!g("0b1")||g("+0x1"))){for(var _,x=function(t){var e=arguments.length<1?0:t,n=this;return n instanceof x&&(b?f((function(){y.valueOf.call(n)})):"Number"!=c(n))?u(new g(w(e)),n,x):w(e)},S=r?d(g):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),E=0;S.length>E;E++)s(g,_=S[E])&&!s(x,_)&&v(x,_,h(g,_));x.prototype=y,y.constructor=x,a(o,"Number",x)}},function(t,e,n){"use strict";var r=n(41);n.n(r).a},function(t,e,n){"use strict";var r=n(42);n.n(r).a},function(t,e,n){"use strict";n.r(e);n(18),n(46),n(34),n(17),n(61),n(65),n(95);function r(t,e,n,r,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void n(t)}s.done?e(c):Promise.resolve(c).then(r,o)}function o(t){return function(){var e=this,n=arguments;return new Promise((function(o,i){var a=t.apply(e,n);function s(t){r(a,o,i,s,c,"next",t)}function c(t){r(a,o,i,s,c,"throw",t)}s(void 0)}))}}
 /*!
@@ -10,4 +10,4 @@
   * vue-router v3.1.6
   * (c) 2020 Evan You
   * @license MIT
-  */function Io(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function Mo(t,e){return e instanceof t||e&&(e.name===t.name||e._name===t._name)}function Do(t,e){for(var n in e)t[n]=e[n];return t}var No={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,r=e.children,o=e.parent,i=e.data;i.routerView=!0;for(var a=o.$createElement,s=n.name,c=o.$route,u=o._routerViewCache||(o._routerViewCache={}),l=0,f=!1;o&&o._routerRoot!==o;){var p=o.$vnode?o.$vnode.data:{};p.routerView&&l++,p.keepAlive&&o._directInactive&&o._inactive&&(f=!0),o=o.$parent}if(i.routerViewDepth=l,f){var d=u[s],h=d&&d.component;return h?(d.configProps&&Uo(h,i,d.route,d.configProps),a(h,i,r)):a()}var v=c.matched[l],m=v&&v.components[s];if(!v||!m)return u[s]=null,a();u[s]={component:m},i.registerRouteInstance=function(t,e){var n=v.instances[s];(e&&n!==t||!e&&n===t)&&(v.instances[s]=e)},(i.hook||(i.hook={})).prepatch=function(t,e){v.instances[s]=e.componentInstance},i.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==v.instances[s]&&(v.instances[s]=t.componentInstance)};var g=v.props&&v.props[s];return g&&(Do(u[s],{route:c,configProps:g}),Uo(m,i,c,g)),a(m,i,r)}};function Uo(t,e,n,r){var o=e.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(n,r);if(o){o=e.props=Do({},o);var i=e.attrs=e.attrs||{};for(var a in o)t.props&&a in t.props||(i[a]=o[a],delete o[a])}}var Bo=/[!'()*]/g,Fo=function(t){return"%"+t.charCodeAt(0).toString(16)},Wo=/%2C/g,Ho=function(t){return encodeURIComponent(t).replace(Bo,Fo).replace(Wo,",")},Vo=decodeURIComponent;function zo(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(t){var n=t.replace(/\+/g," ").split("="),r=Vo(n.shift()),o=n.length>0?Vo(n.join("=")):null;void 0===e[r]?e[r]=o:Array.isArray(e[r])?e[r].push(o):e[r]=[e[r],o]})),e):e}function Go(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return Ho(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(Ho(e)):r.push(Ho(e)+"="+Ho(t)))})),r.join("&")}return Ho(e)+"="+Ho(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var qo=/\/?$/;function Zo(t,e,n,r){var o=r&&r.options.stringifyQuery,i=e.query||{};try{i=Ko(i)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:i,params:e.params||{},fullPath:Jo(e,o),matched:t?Yo(t):[]};return n&&(a.redirectedFrom=Jo(n,o)),Object.freeze(a)}function Ko(t){if(Array.isArray(t))return t.map(Ko);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=Ko(t[n]);return e}return t}var Xo=Zo(null,{path:"/"});function Yo(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function Jo(t,e){var n=t.path,r=t.query;void 0===r&&(r={});var o=t.hash;return void 0===o&&(o=""),(n||"/")+(e||Go)(r)+o}function Qo(t,e){return e===Xo?t===e:!!e&&(t.path&&e.path?t.path.replace(qo,"")===e.path.replace(qo,"")&&t.hash===e.hash&&ti(t.query,e.query):!(!t.name||!e.name)&&(t.name===e.name&&t.hash===e.hash&&ti(t.query,e.query)&&ti(t.params,e.params)))}function ti(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t),r=Object.keys(e);return n.length===r.length&&n.every((function(n){var r=t[n],o=e[n];return"object"==typeof r&&"object"==typeof o?ti(r,o):String(r)===String(o)}))}function ei(t,e,n){var r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;var o=e.split("/");n&&o[o.length-1]||o.pop();for(var i=t.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var s=i[a];".."===s?o.pop():"."!==s&&o.push(s)}return""!==o[0]&&o.unshift(""),o.join("/")}function ni(t){return t.replace(/\/\//g,"/")}var ri=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)},oi=yi,ii=li,ai=function(t,e){return pi(li(t,e))},si=pi,ci=gi,ui=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function li(t,e){for(var n,r=[],o=0,i=0,a="",s=e&&e.delimiter||"/";null!=(n=ui.exec(t));){var c=n[0],u=n[1],l=n.index;if(a+=t.slice(i,l),i=l+c.length,u)a+=u[1];else{var f=t[i],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var y=null!=p&&null!=f&&f!==p,b="+"===m||"*"===m,w="?"===m||"*"===m,_=n[2]||s,x=h||v;r.push({name:d||o++,prefix:p||"",delimiter:_,optional:w,repeat:b,partial:y,asterisk:!!g,pattern:x?hi(x):g?".*":"[^"+di(_)+"]+?"})}}return i<t.length&&(a+=t.substr(i)),a&&r.push(a),r}function fi(t){return encodeURI(t).replace(/[\/?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function pi(t){for(var e=new Array(t.length),n=0;n<t.length;n++)"object"==typeof t[n]&&(e[n]=new RegExp("^(?:"+t[n].pattern+")$"));return function(n,r){for(var o="",i=n||{},a=(r||{}).pretty?fi:encodeURIComponent,s=0;s<t.length;s++){var c=t[s];if("string"!=typeof c){var u,l=i[c.name];if(null==l){if(c.optional){c.partial&&(o+=c.prefix);continue}throw new TypeError('Expected "'+c.name+'" to be defined')}if(ri(l)){if(!c.repeat)throw new TypeError('Expected "'+c.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(0===l.length){if(c.optional)continue;throw new TypeError('Expected "'+c.name+'" to not be empty')}for(var f=0;f<l.length;f++){if(u=a(l[f]),!e[s].test(u))throw new TypeError('Expected all "'+c.name+'" to match "'+c.pattern+'", but received `'+JSON.stringify(u)+"`");o+=(0===f?c.prefix:c.delimiter)+u}}else{if(u=c.asterisk?encodeURI(l).replace(/[?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()})):a(l),!e[s].test(u))throw new TypeError('Expected "'+c.name+'" to match "'+c.pattern+'", but received "'+u+'"');o+=c.prefix+u}}else o+=c}return o}}function di(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function hi(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function vi(t,e){return t.keys=e,t}function mi(t){return t.sensitive?"":"i"}function gi(t,e,n){ri(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<t.length;a++){var s=t[a];if("string"==typeof s)i+=di(s);else{var c=di(s.prefix),u="(?:"+s.pattern+")";e.push(s),s.repeat&&(u+="(?:"+c+u+")*"),i+=u=s.optional?s.partial?c+"("+u+")?":"(?:"+c+"("+u+"))?":c+"("+u+")"}}var l=di(n.delimiter||"/"),f=i.slice(-l.length)===l;return r||(i=(f?i.slice(0,-l.length):i)+"(?:"+l+"(?=$))?"),i+=o?"$":r&&f?"":"(?="+l+"|$)",vi(new RegExp("^"+i,mi(n)),e)}function yi(t,e,n){return ri(e)||(n=e||n,e=[]),n=n||{},t instanceof RegExp?function(t,e){var n=t.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)e.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return vi(t,e)}(t,e):ri(t)?function(t,e,n){for(var r=[],o=0;o<t.length;o++)r.push(yi(t[o],e,n).source);return vi(new RegExp("(?:"+r.join("|")+")",mi(n)),e)}(t,e,n):function(t,e,n){return gi(li(t,n),e,n)}(t,e,n)}oi.parse=ii,oi.compile=ai,oi.tokensToFunction=si,oi.tokensToRegExp=ci;var bi=Object.create(null);function wi(t,e,n){e=e||{};try{var r=bi[t]||(bi[t]=oi.compile(t));return"string"==typeof e.pathMatch&&(e[0]=e.pathMatch),r(e,{pretty:!0})}catch(t){return""}finally{delete e[0]}}function _i(t,e,n,r){var o="string"==typeof t?{path:t}:t;if(o._normalized)return o;if(o.name){var i=(o=Do({},t)).params;return i&&"object"==typeof i&&(o.params=Do({},i)),o}if(!o.path&&o.params&&e){(o=Do({},o))._normalized=!0;var a=Do(Do({},e.params),o.params);if(e.name)o.name=e.name,o.params=a;else if(e.matched.length){var s=e.matched[e.matched.length-1].path;o.path=wi(s,a,e.path)}else 0;return o}var c=function(t){var e="",n="",r=t.indexOf("#");r>=0&&(e=t.slice(r),t=t.slice(0,r));var o=t.indexOf("?");return o>=0&&(n=t.slice(o+1),t=t.slice(0,o)),{path:t,query:n,hash:e}}(o.path||""),u=e&&e.path||"/",l=c.path?ei(c.path,u,n||o.append):u,f=function(t,e,n){void 0===e&&(e={});var r,o=n||zo;try{r=o(t||"")}catch(t){r={}}for(var i in e)r[i]=e[i];return r}(c.query,o.query,r&&r.options.parseQuery),p=o.hash||c.hash;return p&&"#"!==p.charAt(0)&&(p="#"+p),{_normalized:!0,path:l,query:f,hash:p}}var xi,Si=function(){},Ei={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},exact:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,s=o.href,c={},u=n.options.linkActiveClass,l=n.options.linkExactActiveClass,f=null==u?"router-link-active":u,p=null==l?"router-link-exact-active":l,d=null==this.activeClass?f:this.activeClass,h=null==this.exactActiveClass?p:this.exactActiveClass,v=a.redirectedFrom?Zo(null,_i(a.redirectedFrom),null,n):a;c[h]=Qo(r,v),c[d]=this.exact?c[h]:function(t,e){return 0===t.path.replace(qo,"/").indexOf(e.path.replace(qo,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(r,v);var m=function(t){Oi(t)&&(e.replace?n.replace(i,Si):n.push(i,Si))},g={click:Oi};Array.isArray(this.event)?this.event.forEach((function(t){g[t]=m})):g[this.event]=m;var y={class:c},b=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:a,navigate:m,isActive:c[d],isExactActive:c[h]});if(b){if(1===b.length)return b[0];if(b.length>1||!b.length)return 0===b.length?t():t("span",{},b)}if("a"===this.tag)y.on=g,y.attrs={href:s};else{var w=function t(e){var n;if(e)for(var r=0;r<e.length;r++){if("a"===(n=e[r]).tag)return n;if(n.children&&(n=t(n.children)))return n}}(this.$slots.default);if(w){w.isStatic=!1;var _=w.data=Do({},w.data);for(var x in _.on=_.on||{},_.on){var S=_.on[x];x in g&&(_.on[x]=Array.isArray(S)?S:[S])}for(var E in g)E in _.on?_.on[E].push(g[E]):_.on[E]=m;(w.data.attrs=Do({},w.data.attrs)).href=s}else y.on=g}return t(this.tag,y,this.$slots.default)}};function Oi(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}var ki="undefined"!=typeof window;function Ci(t,e,n,r){var o=e||[],i=n||Object.create(null),a=r||Object.create(null);t.forEach((function(t){!function t(e,n,r,o,i,a){var s=o.path,c=o.name;0;var u=o.pathToRegexpOptions||{},l=function(t,e,n){n||(t=t.replace(/\/$/,""));if("/"===t[0])return t;if(null==e)return t;return ni(e.path+"/"+t)}(s,i,u.strict);"boolean"==typeof o.caseSensitive&&(u.sensitive=o.caseSensitive);var f={path:l,regex:Ai(l,u),components:o.components||{default:o.component},instances:{},name:c,parent:i,matchAs:a,redirect:o.redirect,beforeEnter:o.beforeEnter,meta:o.meta||{},props:null==o.props?{}:o.components?o.props:{default:o.props}};o.children&&o.children.forEach((function(o){var i=a?ni(a+"/"+o.path):void 0;t(e,n,r,o,f,i)}));n[f.path]||(e.push(f.path),n[f.path]=f);if(void 0!==o.alias)for(var p=Array.isArray(o.alias)?o.alias:[o.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:o.children};t(e,n,r,h,i,f.path||"/")}c&&(r[c]||(r[c]=f))}(o,i,a,t)}));for(var s=0,c=o.length;s<c;s++)"*"===o[s]&&(o.push(o.splice(s,1)[0]),c--,s--);return{pathList:o,pathMap:i,nameMap:a}}function Ai(t,e){return oi(t,[],e)}function Ti(t,e){var n=Ci(t),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(t,n,a){var s=_i(t,n,!1,e),u=s.name;if(u){var l=i[u];if(!l)return c(null,s);var f=l.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if("object"!=typeof s.params&&(s.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in s.params)&&f.indexOf(p)>-1&&(s.params[p]=n.params[p]);return s.path=wi(l.path,s.params),c(l,s,a)}if(s.path){s.params={};for(var d=0;d<r.length;d++){var h=r[d],v=o[h];if($i(v.regex,s.path,s.params))return c(v,s,a)}}return c(null,s)}function s(t,n){var r=t.redirect,o="function"==typeof r?r(Zo(t,n,null,e)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return c(null,n);var s=o,u=s.name,l=s.path,f=n.query,p=n.hash,d=n.params;if(f=s.hasOwnProperty("query")?s.query:f,p=s.hasOwnProperty("hash")?s.hash:p,d=s.hasOwnProperty("params")?s.params:d,u){i[u];return a({_normalized:!0,name:u,query:f,hash:p,params:d},void 0,n)}if(l){var h=function(t,e){return ei(t,e.parent?e.parent.path:"/",!0)}(l,t);return a({_normalized:!0,path:wi(h,d),query:f,hash:p},void 0,n)}return c(null,n)}function c(t,n,r){return t&&t.redirect?s(t,r||n):t&&t.matchAs?function(t,e,n){var r=a({_normalized:!0,path:wi(n,e.params)});if(r){var o=r.matched,i=o[o.length-1];return e.params=r.params,c(i,e)}return c(null,e)}(0,n,t.matchAs):Zo(t,n,r,e)}return{match:a,addRoutes:function(t){Ci(t,r,o,i)}}}function $i(t,e,n){var r=e.match(t);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=t.keys[o-1],s="string"==typeof r[o]?decodeURIComponent(r[o]):r[o];a&&(n[a.name||"pathMatch"]=s)}return!0}var ji=ki&&window.performance&&window.performance.now?window.performance:Date;function Pi(){return ji.now().toFixed(3)}var Li=Pi();function Ri(){return Li}function Ii(t){return Li=t}var Mi=Object.create(null);function Di(){var t=window.location.protocol+"//"+window.location.host,e=window.location.href.replace(t,""),n=Do({},window.history.state);n.key=Ri(),window.history.replaceState(n,"",e),window.addEventListener("popstate",(function(t){Ui(),t.state&&t.state.key&&Ii(t.state.key)}))}function Ni(t,e,n,r){if(t.app){var o=t.options.scrollBehavior;o&&t.app.$nextTick((function(){var i=function(){var t=Ri();if(t)return Mi[t]}(),a=o.call(t,e,n,r?i:null);a&&("function"==typeof a.then?a.then((function(t){Vi(t,i)})).catch((function(t){0})):Vi(a,i))}))}}function Ui(){var t=Ri();t&&(Mi[t]={x:window.pageXOffset,y:window.pageYOffset})}function Bi(t){return Wi(t.x)||Wi(t.y)}function Fi(t){return{x:Wi(t.x)?t.x:window.pageXOffset,y:Wi(t.y)?t.y:window.pageYOffset}}function Wi(t){return"number"==typeof t}var Hi=/^#\d/;function Vi(t,e){var n,r="object"==typeof t;if(r&&"string"==typeof t.selector){var o=Hi.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(o){var i=t.offset&&"object"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(o,i={x:Wi((n=i).x)?n.x:0,y:Wi(n.y)?n.y:0})}else Bi(t)&&(e=Fi(t))}else r&&Bi(t)&&(e=Fi(t));e&&window.scrollTo(e.x,e.y)}var zi,Gi=ki&&((-1===(zi=window.navigator.userAgent).indexOf("Android 2.")&&-1===zi.indexOf("Android 4.0")||-1===zi.indexOf("Mobile Safari")||-1!==zi.indexOf("Chrome")||-1!==zi.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history);function qi(t,e){Ui();var n=window.history;try{if(e){var r=Do({},n.state);r.key=Ri(),n.replaceState(r,"",t)}else n.pushState({key:Ii(Pi())},"",t)}catch(n){window.location[e?"replace":"assign"](t)}}function Zi(t){qi(t,!0)}function Ki(t,e,n){var r=function(o){o>=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}function Xi(t){return function(e,n,r){var o=!1,i=0,a=null;Yi(t,(function(t,e,n,s){if("function"==typeof t&&void 0===t.cid){o=!0,i++;var c,u=ta((function(e){var o;((o=e).__esModule||Qi&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:xi.extend(e),n.components[s]=e,--i<=0&&r()})),l=ta((function(t){var e="Failed to resolve async component "+s+": "+t;a||(a=Io(t)?t:new Error(e),r(a))}));try{c=t(u,l)}catch(t){l(t)}if(c)if("function"==typeof c.then)c.then(u,l);else{var f=c.component;f&&"function"==typeof f.then&&f.then(u,l)}}})),o||r()}}function Yi(t,e){return Ji(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Ji(t){return Array.prototype.concat.apply([],t)}var Qi="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function ta(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var ea=function(t){function e(e){t.call(this),this.name=this._name="NavigationDuplicated",this.message='Navigating to current location ("'+e.fullPath+'") is not allowed',Object.defineProperty(this,"stack",{value:(new t).stack,writable:!0,configurable:!0})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(Error);ea._name="NavigationDuplicated";var na=function(t,e){this.router=t,this.base=function(t){if(!t)if(ki){var e=document.querySelector("base");t=(t=e&&e.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else t="/";"/"!==t.charAt(0)&&(t="/"+t);return t.replace(/\/$/,"")}(e),this.current=Xo,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function ra(t,e,n,r){var o=Yi(t,(function(t,r,o,i){var a=function(t,e){"function"!=typeof t&&(t=xi.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,r,o,i)})):n(a,r,o,i)}));return Ji(r?o.reverse():o)}function oa(t,e){if(e)return function(){return t.apply(e,arguments)}}na.prototype.listen=function(t){this.cb=t},na.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},na.prototype.onError=function(t){this.errorCbs.push(t)},na.prototype.transitionTo=function(t,e,n){var r=this,o=this.router.match(t,this.current);this.confirmTransition(o,(function(){r.updateRoute(o),e&&e(o),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(t){t(o)})))}),(function(t){n&&n(t),t&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(e){e(t)})))}))},na.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current,i=function(t){!Mo(ea,t)&&Io(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)};if(Qo(t,o)&&t.matched.length===o.matched.length)return this.ensureURL(),i(new ea(t));var a=function(t,e){var n,r=Math.max(t.length,e.length);for(n=0;n<r&&t[n]===e[n];n++);return{updated:e.slice(0,n),activated:e.slice(n),deactivated:t.slice(n)}}(this.current.matched,t.matched),s=a.updated,c=a.deactivated,u=a.activated,l=[].concat(function(t){return ra(t,"beforeRouteLeave",oa,!0)}(c),this.router.beforeHooks,function(t){return ra(t,"beforeRouteUpdate",oa)}(s),u.map((function(t){return t.beforeEnter})),Xi(u));this.pending=t;var f=function(e,n){if(r.pending!==t)return i();try{e(t,o,(function(t){!1===t||Io(t)?(r.ensureURL(!0),i(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(i(),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(t){i(t)}};Ki(l,f,(function(){var n=[];Ki(function(t,e,n){return ra(t,"beforeRouteEnter",(function(t,r,o,i){return function(t,e,n,r,o){return function(i,a,s){return t(i,a,(function(t){"function"==typeof t&&r.push((function(){!function t(e,n,r,o){n[r]&&!n[r]._isBeingDestroyed?e(n[r]):o()&&setTimeout((function(){t(e,n,r,o)}),16)}(t,e.instances,n,o)})),s(t)}))}}(t,o,i,e,n)}))}(u,n,(function(){return r.current===t})).concat(r.router.resolveHooks),f,(function(){if(r.pending!==t)return i();r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){n.forEach((function(t){t()}))}))}))}))},na.prototype.updateRoute=function(t){var e=this.current;this.current=t,this.cb&&this.cb(t),this.router.afterHooks.forEach((function(n){n&&n(t,e)}))};var ia=function(t){function e(e,n){var r=this;t.call(this,e,n);var o=e.options.scrollBehavior,i=Gi&&o;i&&Di();var a=aa(this.base);window.addEventListener("popstate",(function(t){var n=r.current,o=aa(r.base);r.current===Xo&&o===a||r.transitionTo(o,(function(t){i&&Ni(e,t,n,!0)}))}))}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){qi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Zi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(aa(this.base)!==this.current.fullPath){var e=ni(this.base+this.current.fullPath);t?qi(e):Zi(e)}},e.prototype.getCurrentLocation=function(){return aa(this.base)},e}(na);function aa(t){var e=decodeURI(window.location.pathname);return t&&0===e.indexOf(t)&&(e=e.slice(t.length)),(e||"/")+window.location.search+window.location.hash}var sa=function(t){function e(e,n,r){t.call(this,e,n),r&&function(t){var e=aa(t);if(!/^\/#/.test(e))return window.location.replace(ni(t+"/#"+e)),!0}(this.base)||ca()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this,e=this.router.options.scrollBehavior,n=Gi&&e;n&&Di(),window.addEventListener(Gi?"popstate":"hashchange",(function(){var e=t.current;ca()&&t.transitionTo(ua(),(function(r){n&&Ni(t.router,r,e,!0),Gi||pa(r.fullPath)}))}))},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){fa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){pa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;ua()!==e&&(t?fa(e):pa(e))},e.prototype.getCurrentLocation=function(){return ua()},e}(na);function ca(){var t=ua();return"/"===t.charAt(0)||(pa("/"+t),!1)}function ua(){var t=window.location.href,e=t.indexOf("#");if(e<0)return"";var n=(t=t.slice(e+1)).indexOf("?");if(n<0){var r=t.indexOf("#");t=r>-1?decodeURI(t.slice(0,r))+t.slice(r):decodeURI(t)}else t=decodeURI(t.slice(0,n))+t.slice(n);return t}function la(t){var e=window.location.href,n=e.indexOf("#");return(n>=0?e.slice(0,n):e)+"#"+t}function fa(t){Gi?qi(la(t)):window.location.hash=t}function pa(t){Gi?Zi(la(t)):window.location.replace(la(t))}var da=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){e.index=n,e.updateRoute(r)}),(function(t){Mo(ea,t)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(na),ha=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ti(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!Gi&&!1!==t.fallback,this.fallback&&(e="hash"),ki||(e="abstract"),this.mode=e,e){case"history":this.history=new ia(this,t.base);break;case"hash":this.history=new sa(this,t.base,this.fallback);break;case"abstract":this.history=new da(this,t.base);break;default:0}},va={currentRoute:{configurable:!0}};function ma(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}ha.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},va.currentRoute.get=function(){return this.history&&this.history.current},ha.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null)})),!this.app){this.app=t;var n=this.history;if(n instanceof ia)n.transitionTo(n.getCurrentLocation());else if(n instanceof sa){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},ha.prototype.beforeEach=function(t){return ma(this.beforeHooks,t)},ha.prototype.beforeResolve=function(t){return ma(this.resolveHooks,t)},ha.prototype.afterEach=function(t){return ma(this.afterHooks,t)},ha.prototype.onReady=function(t,e){this.history.onReady(t,e)},ha.prototype.onError=function(t){this.history.onError(t)},ha.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},ha.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},ha.prototype.go=function(t){this.history.go(t)},ha.prototype.back=function(){this.go(-1)},ha.prototype.forward=function(){this.go(1)},ha.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},ha.prototype.resolve=function(t,e,n){var r=_i(t,e=e||this.history.current,n,this),o=this.match(r,e),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(t,e,n){var r="hash"===n?"#"+e:e;return t?ni(t+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},ha.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==Xo&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ha.prototype,va),ha.install=function t(e){if(!t.installed||xi!==e){t.installed=!0,xi=e;var n=function(t){return void 0!==t},r=function(t,e){var r=t.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",No),e.component("RouterLink",Ei);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},ha.version="3.1.6",ki&&window.Vue&&window.Vue.use(ha);var ga=ha;n(50),n(127),n(129),n(130),n(131),n(69),n(132),n(51);function ya(t){t.locales&&Object.keys(t.locales).forEach((function(e){t.locales[e].path=e})),Object.freeze(t)}n(108),n(133),n(22),n(110),n(47);function ba(t){return(ba="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var wa=n(43),_a={NotFound:function(){return n.e(23).then(n.bind(null,250))},Layout:function(){return Promise.all([n.e(0),n.e(2)]).then(n.bind(null,249))}},xa={"v-64a170d8":function(){return n.e(24).then(n.bind(null,253))},"v-078c5be8":function(){return n.e(25).then(n.bind(null,254))},"v-5655e588":function(){return n.e(11).then(n.bind(null,255))},"v-4ef07d88":function(){return n.e(12).then(n.bind(null,256))},"v-64577bce":function(){return n.e(6).then(n.bind(null,257))},"v-3f6f84e0":function(){return n.e(5).then(n.bind(null,258))},"v-2524cb94":function(){return n.e(15).then(n.bind(null,259))},"v-56b3c5a0":function(){return n.e(16).then(n.bind(null,260))},"v-68f30830":function(){return n.e(13).then(n.bind(null,261))},"v-b07002f8":function(){return n.e(8).then(n.bind(null,262))},"v-a06af470":function(){return n.e(3).then(n.bind(null,263))},"v-27757210":function(){return n.e(4).then(n.bind(null,264))},"v-20dff7a8":function(){return n.e(14).then(n.bind(null,265))},"v-1633bbb4":function(){return n.e(26).then(n.bind(null,266))},"v-70e651e8":function(){return n.e(17).then(n.bind(null,267))},"v-45ee3628":function(){return n.e(27).then(n.bind(null,268))},"v-a42e43b0":function(){return n.e(28).then(n.bind(null,269))},"v-22582db0":function(){return n.e(7).then(n.bind(null,270))},"v-39635cd4":function(){return n.e(18).then(n.bind(null,271))},"v-7ded8e00":function(){return n.e(19).then(n.bind(null,272))},"v-06f2dc82":function(){return n.e(20).then(n.bind(null,273))},"v-9fe692c0":function(){return n.e(21).then(n.bind(null,274))},"v-b2ccea3a":function(){return n.e(29).then(n.bind(null,275))}};function Sa(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var Ea=/-(\w)/g,Oa=Sa((function(t){return t.replace(Ea,(function(t,e){return e?e.toUpperCase():""}))})),ka=/\B([A-Z])/g,Ca=Sa((function(t){return t.replace(ka,"-$1").toLowerCase()})),Aa=Sa((function(t){return t.charAt(0).toUpperCase()+t.slice(1)}));function Ta(t,e){if(e)return t(e)?t(e):e.includes("-")?t(Aa(Oa(e))):t(Aa(e))||t(Ca(e))}var $a=Object.assign({},_a,xa),ja=function(t){return $a[t]},Pa=function(t){return xa[t]},La=function(t){return _a[t]},Ra=function(t){return Ro.component(t)};function Ia(t){return Ta(Pa,t)}function Ma(t){return Ta(La,t)}function Da(t){return Ta(ja,t)}function Na(t){return Ta(Ra,t)}function Ua(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return Promise.all(e.filter((function(t){return t})).map(function(){var t=o(regeneratorRuntime.mark((function t(e){var n;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Na(e)||!Da(e)){t.next=5;break}return t.next=3,Da(e)();case 3:n=t.sent,Ro.component(e,n.default);case 5:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()))}function Ba(t,e){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[t]=e)}n(100),n(102),n(67),n(136);var Fa={created:function(){this.$ssrContext&&(this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.description=this.$page.description||this.$description)},mounted:function(){this.currentMetaTags=new Set,this.updateMeta()},methods:{updateMeta:function(){var t=this;document.title=this.$title,document.documentElement.lang=this.$lang;var e=this.$page.frontmatter.meta||[],n=e.slice(0);0===e.filter((function(t){return"description"===t.name})).length&&n.push({name:"description",content:this.$description});var r=document.querySelectorAll('meta[name="description"]');r.length&&r.forEach((function(e){return t.currentMetaTags.add(e)})),this.currentMetaTags=new Set(Wa(n,this.currentMetaTags))}},watch:{$page:function(){this.updateMeta()}},beforeDestroy:function(){Wa(null,this.currentMetaTags)}};function Wa(t,e){if(e&&Object(wa.a)(e).forEach((function(t){document.head.removeChild(t)})),t)return t.map((function(t){var e=document.createElement("meta");return Object.keys(t).forEach((function(n){e.setAttribute(n,t[n])})),document.head.appendChild(e),e}))}n(106);var Ha=n(44),Va=n.n(Ha),za={mounted:function(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Va()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var t=this,e=[].slice.call(document.querySelectorAll(".sidebar-link")),n=[].slice.call(document.querySelectorAll(".header-anchor")).filter((function(t){return e.some((function(e){return e.hash===t.hash}))})),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),o=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),i=window.innerHeight+r,a=0;a<n.length;a++){var s=n[a],c=n[a+1],u=0===a&&0===r||r>=s.parentElement.offsetTop+10&&(!c||r<c.parentElement.offsetTop-10),l=decodeURIComponent(this.$route.hash);if(u&&l!==decodeURIComponent(s.hash)){var f=s;if(i===o)for(var p=a+1;p<n.length;p++)if(l===decodeURIComponent(n[p].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(f.hash),(function(){t.$nextTick((function(){t.$vuepress.$set("disableScrollBehavior",!1)}))}))}}}},beforeDestroy:function(){window.removeEventListener("scroll",this.onScroll)}},Ga=n(45),qa=n.n(Ga),Za={mounted:function(){var t=this;qa.a.configure({showSpinner:!1}),this.$router.beforeEach((function(t,e,n){t.path===e.path||Ro.component(t.name)||qa.a.start(),n()})),this.$router.afterEach((function(){qa.a.done(),t.isSidebarOpen=!1}))}};n(105);function Ka(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function Xa(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}n(117),n(118);var Ya={props:{parent:Object,code:String,options:{align:String,color:String,backgroundTransition:Boolean,backgroundColor:String,successText:String,staticIcon:Boolean}},data:function(){return{success:!1,originalBackground:null,originalTransition:null}},computed:{alignStyle:function(){var t={};return t[this.options.align]="7.5px",t},iconClass:function(){return this.options.staticIcon?"":"hover"}},mounted:function(){this.originalTransition=this.parent.style.transition,this.originalBackground=this.parent.style.background},beforeDestroy:function(){this.parent.style.transition=this.originalTransition,this.parent.style.background=this.originalBackground},methods:{hexToRgb:function(t){var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null},copyToClipboard:function(t){var e=this;if(navigator.clipboard)navigator.clipboard.writeText(this.code).then((function(){e.setSuccessTransitions()}),(function(){}));else{var n=document.createElement("textarea");document.body.appendChild(n),n.value=this.code,n.select(),document.execCommand("Copy"),n.remove(),this.setSuccessTransitions()}},setSuccessTransitions:function(){var t=this;if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";var e=this.hexToRgb(this.options.backgroundColor);this.parent.style.background="rgba(".concat(e.r,", ").concat(e.g,", ").concat(e.b,", 0.1)")}this.success=!0,this.successTimeout=setTimeout((function(){t.options.backgroundTransition&&(t.parent.style.background=t.originalBackground,t.parent.style.transition=t.originalTransition),t.success=!1}),500)}}},Ja=(n(145),n(10)),Qa=Object(Ja.a)(Ya,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"code-copy"},[n("svg",{class:t.iconClass,style:t.alignStyle,attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},on:{click:t.copyToClipboard}},[n("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),t._v(" "),n("path",{attrs:{fill:t.options.color,d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"}})]),t._v(" "),n("span",{class:t.success?"success":"",style:t.alignStyle},[t._v("\n        "+t._s(t.options.successText)+"\n    ")])])}),[],!1,null,"49140617",null).exports,ts=(n(146),[Fa,za,Za,{updated:function(){this.update()},methods:{update:function(){setTimeout((function(){document.querySelectorAll('div[class*="language-"] pre').forEach((function(t){if(!t.classList.contains("code-copy-added")){var e=new(Ro.extend(Qa));e.options=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Xa(Object(n),!0).forEach((function(e){Ka(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Xa(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},{align:"bottom",color:"#27b1ff",backgroundTransition:!0,backgroundColor:"#0075b8",successText:"Copied!",staticIcon:!1}),e.code=t.innerText,e.parent=t,e.$mount(),t.classList.add("code-copy-added"),t.appendChild(e.$el)}}))}),100)}}}]),es={name:"GlobalLayout",computed:{layout:function(){var t=this.getLayout();return Ba("layout",t),Ro.component(t)}},methods:{getLayout:function(){if(this.$page.path){var t=this.$page.frontmatter.layout;return t&&(this.$vuepress.getLayoutAsyncComponent(t)||this.$vuepress.getVueComponent(t))?t:"Layout"}return"NotFound"}}},ns=Object(Ja.a)(es,(function(){var t=this.$createElement;return(this._self._c||t)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(t,e,n){var r;switch(e){case"components":t[e]||(t[e]={}),Object.assign(t[e],n);break;case"mixins":t[e]||(t[e]=[]),(r=t[e]).push.apply(r,Object(wa.a)(n));break;default:throw new Error("Unknown option name.")}}(ns,"mixins",ts);var rs=[{name:"v-64a170d8",path:"/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64a170d8").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-078c5be8",path:"/beginner/tutorial1-window/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-078c5be8").then(n)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-5655e588",path:"/beginner/tutorial2-swapchain/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-5655e588").then(n)}},{path:"/beginner/tutorial2-swapchain/index.html",redirect:"/beginner/tutorial2-swapchain/"},{name:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-4ef07d88").then(n)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-64577bce",path:"/beginner/tutorial4-buffer/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64577bce").then(n)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-3f6f84e0").then(n)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-2524cb94").then(n)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-56b3c5a0").then(n)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-68f30830",path:"/beginner/tutorial8-depth/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-68f30830").then(n)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-b07002f8",path:"/beginner/tutorial9-models/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b07002f8").then(n)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-a06af470",path:"/intermediate/tutorial10-lighting/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a06af470").then(n)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-27757210",path:"/intermediate/tutorial11-normals/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-27757210").then(n)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-20dff7a8").then(n)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-1633bbb4").then(n)}},{path:"/intermediate/tutorial13-threading/index.html",redirect:"/intermediate/tutorial13-threading/"},{name:"v-70e651e8",path:"/news/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-70e651e8").then(n)}},{path:"/news/index.html",redirect:"/news/"},{name:"v-45ee3628",path:"/showcase/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-45ee3628").then(n)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-a42e43b0",path:"/showcase/alignment/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a42e43b0").then(n)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-22582db0",path:"/showcase/compute/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-22582db0").then(n)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-39635cd4",path:"/showcase/gifs/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-39635cd4").then(n)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-7ded8e00",path:"/showcase/imgui-demo/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-7ded8e00").then(n)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-06f2dc82",path:"/showcase/pong/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-06f2dc82").then(n)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-9fe692c0",path:"/showcase/windowless/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-9fe692c0").then(n)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-b2ccea3a",path:"/todo.html",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b2ccea3a").then(n)}},{path:"*",component:ns}],os={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",pages:[{title:"Introduction",frontmatter:{meta:[{property:"article:modified_time",content:"2021-03-20T13:35:03.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Introduction"},{property:"og:type",content:"website"},{property:"og:url",content:"/"},{name:"twitter:title",content:"Introduction"},{name:"twitter:url",content:"/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/",relativePath:"README.md",key:"v-64a170d8",path:"/",headers:[{level:2,title:"What is wgpu?",slug:"what-is-wgpu"},{level:2,title:"Why Rust?",slug:"why-rust"},{level:2,title:"Contribution and Support",slug:"contribution-and-support"},{level:2,title:"Special thanks to these patrons!",slug:"special-thanks-to-these-patrons"}],lastUpdated:"3/20/2021, 1:35:03 PM"},{title:"Dependencies and the window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Dependencies and the window"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial1-window/"},{name:"twitter:title",content:"Dependencies and the window"},{name:"twitter:url",content:"/beginner/tutorial1-window/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial1-window/",relativePath:"beginner/tutorial1-window/README.md",key:"v-078c5be8",path:"/beginner/tutorial1-window/",headers:[{level:2,title:"Boring, I know",slug:"boring-i-know"},{level:2,title:"What crates are we using?",slug:"what-crates-are-we-using"},{level:3,title:"Vulkan Portability Layer",slug:"vulkan-portability-layer"},{level:2,title:"The code",slug:"the-code"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"The Swapchain",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Swapchain"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:title",content:"The Swapchain"},{name:"twitter:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial2-swapchain/",relativePath:"beginner/tutorial2-swapchain/README.md",key:"v-5655e588",path:"/beginner/tutorial2-swapchain/",headers:[{level:2,title:"First, some house keeping: State",slug:"first-some-house-keeping-state"},{level:2,title:"State::new()",slug:"state-new"},{level:2,title:"resize()",slug:"resize"},{level:2,title:"input()",slug:"input"},{level:2,title:"update()",slug:"update"},{level:2,title:"render()",slug:"render"},{level:2,title:"Wait, what's going on with RenderPassDescriptor?",slug:"wait-what-s-going-on-with-renderpassdescriptor"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"The Pipeline",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-19T02:28:08.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Pipeline"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:title",content:"The Pipeline"},{name:"twitter:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial3-pipeline/",relativePath:"beginner/tutorial3-pipeline/README.md",key:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",headers:[{level:2,title:"What's a pipeline?",slug:"what-s-a-pipeline"},{level:2,title:"Wait shaders?",slug:"wait-shaders"},{level:2,title:"Vertex, fragment.. what are those?",slug:"vertex-fragment-what-are-those"},{level:2,title:"WGSL",slug:"wgsl"},{level:2,title:"Writing the shaders",slug:"writing-the-shaders"},{level:2,title:"How do we use the shaders?",slug:"how-do-we-use-the-shaders"},{level:2,title:"Using a pipeline",slug:"using-a-pipeline"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/19/2021, 2:28:08 AM"},{title:"Buffers and Indices",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-19T02:38:15.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Buffers and Indices"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:title",content:"Buffers and Indices"},{name:"twitter:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial4-buffer/",relativePath:"beginner/tutorial4-buffer/README.md",key:"v-64577bce",path:"/beginner/tutorial4-buffer/",headers:[{level:2,title:"We're finally talking about them!",slug:"we-re-finally-talking-about-them"},{level:2,title:"What is a buffer?",slug:"what-is-a-buffer"},{level:2,title:"The vertex buffer",slug:"the-vertex-buffer"},{level:2,title:"So what do I do with it?",slug:"so-what-do-i-do-with-it"},{level:2,title:"The index buffer",slug:"the-index-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/19/2021, 2:38:15 AM"},{title:"Textures and bind groups",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-19T02:38:15.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Textures and bind groups"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:title",content:"Textures and bind groups"},{name:"twitter:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial5-textures/",relativePath:"beginner/tutorial5-textures/README.md",key:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",headers:[{level:2,title:"Loading an image from a file",slug:"loading-an-image-from-a-file"},{level:2,title:"Getting data into a Texture",slug:"getting-data-into-a-texture"},{level:2,title:"TextureViews and Samplers",slug:"textureviews-and-samplers"},{level:2,title:"The BindGroup",slug:"the-bindgroup"},{level:2,title:"PipelineLayout",slug:"pipelinelayout"},{level:2,title:"A change to the VERTICES",slug:"a-change-to-the-vertices"},{level:2,title:"Shader time",slug:"shader-time"},{level:2,title:"The results",slug:"the-results"},{level:2,title:"Cleaning things up",slug:"cleaning-things-up"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/19/2021, 2:38:15 AM"},{title:"Uniform buffers and a 3d camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-20T23:53:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Uniform buffers and a 3d camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:title",content:"Uniform buffers and a 3d camera"},{name:"twitter:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial6-uniforms/",relativePath:"beginner/tutorial6-uniforms/README.md",key:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",headers:[{level:2,title:"A perspective camera",slug:"a-perspective-camera"},{level:2,title:"The uniform buffer",slug:"the-uniform-buffer"},{level:2,title:"Uniform buffers and bind groups",slug:"uniform-buffers-and-bind-groups"},{level:2,title:"Using the uniforms in the vertex shader",slug:"using-the-uniforms-in-the-vertex-shader"},{level:2,title:"A controller for our camera",slug:"a-controller-for-our-camera"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/20/2021, 11:53:47 PM"},{title:"Instancing",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-20T23:53:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Instancing"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:title",content:"Instancing"},{name:"twitter:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial7-instancing/",relativePath:"beginner/tutorial7-instancing/README.md",key:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",headers:[{level:2,title:"The Instance Buffer",slug:"the-instance-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/20/2021, 11:53:47 PM"},{title:"The Depth Buffer",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Depth Buffer"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:title",content:"The Depth Buffer"},{name:"twitter:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial8-depth/",relativePath:"beginner/tutorial8-depth/README.md",key:"v-68f30830",path:"/beginner/tutorial8-depth/",headers:[{level:2,title:"Sorting from back to front",slug:"sorting-from-back-to-front"},{level:2,title:"A pixels depth",slug:"a-pixels-depth"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"Model Loading",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-20T23:53:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Model Loading"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial9-models/"},{name:"twitter:title",content:"Model Loading"},{name:"twitter:url",content:"/beginner/tutorial9-models/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial9-models/",relativePath:"beginner/tutorial9-models/README.md",key:"v-b07002f8",path:"/beginner/tutorial9-models/",headers:[{level:2,title:"Accessing files in the res folder",slug:"accessing-files-in-the-res-folder"},{level:2,title:"Loading models with TOBJ",slug:"loading-models-with-tobj"},{level:2,title:"Rendering a mesh",slug:"rendering-a-mesh"},{level:2,title:"Using the correct textures",slug:"using-the-correct-textures"},{level:2,title:"Rendering the entire model",slug:"rendering-the-entire-model"}],lastUpdated:"5/20/2021, 11:53:47 PM"},{title:"Working with Lights",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Working with Lights"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:title",content:"Working with Lights"},{name:"twitter:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial10-lighting/",relativePath:"intermediate/tutorial10-lighting/README.md",key:"v-a06af470",path:"/intermediate/tutorial10-lighting/",headers:[{level:2,title:"Ray/Path Tracing",slug:"ray-path-tracing"},{level:2,title:"The Blinn-Phong Model",slug:"the-blinn-phong-model"},{level:2,title:"Seeing the light",slug:"seeing-the-light"},{level:2,title:"Ambient Lighting",slug:"ambient-lighting"},{level:2,title:"Diffuse Lighting",slug:"diffuse-lighting"},{level:2,title:"The normal matrix",slug:"the-normal-matrix"},{level:2,title:"Specular Lighting",slug:"specular-lighting"},{level:2,title:"The half direction",slug:"the-half-direction"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"Normal Mapping",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Normal Mapping"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:title",content:"Normal Mapping"},{name:"twitter:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial11-normals/",relativePath:"intermediate/tutorial11-normals/README.md",key:"v-27757210",path:"/intermediate/tutorial11-normals/",headers:[{level:2,title:"Tangent Space to World Space",slug:"tangent-space-to-world-space"},{level:2,title:"The tangent, and the bitangent",slug:"the-tangent-and-the-bitangent"},{level:2,title:"World Space to Tangent Space",slug:"world-space-to-tangent-space"},{level:2,title:"Srgb and normal textures",slug:"srgb-and-normal-textures"},{level:2,title:"Unrelated stuff",slug:"unrelated-stuff"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"A Better Camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-04-19T01:36:12.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"A Better Camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:title",content:"A Better Camera"},{name:"twitter:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial12-camera/",relativePath:"intermediate/tutorial12-camera/README.md",key:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",headers:[{level:2,title:"The Camera",slug:"the-camera"},{level:2,title:"The Projection",slug:"the-projection"},{level:2,title:"Cleaning up main.rs",slug:"cleaning-up-main-rs"}],lastUpdated:"4/19/2021, 1:36:12 AM"},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Multi-threading with Wgpu and Rayon"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:title",content:"Multi-threading with Wgpu and Rayon"},{name:"twitter:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial13-threading/",relativePath:"intermediate/tutorial13-threading/README.md",key:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",headers:[{level:2,title:"Parallelizing loading models and textures",slug:"parallelizing-loading-models-and-textures"},{level:2,title:"It's that easy!",slug:"it-s-that-easy"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"News",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"News"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/"},{name:"twitter:title",content:"News"},{name:"twitter:url",content:"/news/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/",relativePath:"news/README.md",key:"v-70e651e8",path:"/news/",headers:[{level:2,title:"0.8 and WGSL",slug:"_0-8-and-wgsl"},{level:3,title:"The GLSL shaders have been translated to WGSL",slug:"the-glsl-shaders-have-been-translated-to-wgsl"},{level:3,title:"Shaderc has been removed",slug:"shaderc-has-been-removed"},{level:3,title:"Some of the showcase examples are broken",slug:"some-of-the-showcase-examples-are-broken"},{level:3,title:"Various API changes",slug:"various-api-changes"},{level:2,title:"0.7",slug:"_0-7"},{level:2,title:"November 2020 Cleanup, Content Freeze, and Patreon",slug:"november-2020-cleanup-content-freeze-and-patreon"},{level:2,title:"0.6",slug:"_0-6"},{level:2,title:"Added Pong Showcase",slug:"added-pong-showcase"},{level:2,title:"Normal mapping",slug:"normal-mapping"},{level:2,title:"0.5!",slug:"_0-5"},{level:2,title:"Reworked lighting tutorial",slug:"reworked-lighting-tutorial"},{level:2,title:"Added GIF showcase",slug:"added-gif-showcase"},{level:2,title:"Updated texture tutorials",slug:"updated-texture-tutorials"},{level:2,title:"Fixed panics do to not specifying the correct usage",slug:"fixed-panics-do-to-not-specifying-the-correct-usage"},{level:2,title:"Updating Winit from 0.20.0-alpha5 to 0.20",slug:"updating-winit-from-0-20-0-alpha5-to-0-20"},{level:2,title:"Changed tutorial examples to use a src directory",slug:"changed-tutorial-examples-to-use-a-src-directory"},{level:2,title:"Updating to 0.4 from 0.3",slug:"updating-to-0-4-from-0-3"},{level:2,title:"New/Recent Articles",slug:"new-recent-articles"}],lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Foreward",frontmatter:{meta:[{property:"article:modified_time",content:"2020-09-25T21:57:57.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Foreward"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/"},{name:"twitter:title",content:"Foreward"},{name:"twitter:url",content:"/showcase/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-45ee3628",path:"/showcase/",lastUpdated:"9/25/2020, 9:57:57 PM"},{title:"Memory Layout in GLSL",frontmatter:{meta:[{property:"article:modified_time",content:"2020-11-21T20:16:07.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Memory Layout in GLSL"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/alignment/"},{name:"twitter:title",content:"Memory Layout in GLSL"},{name:"twitter:url",content:"/showcase/alignment/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/alignment/",relativePath:"showcase/alignment/README.md",key:"v-a42e43b0",path:"/showcase/alignment/",headers:[{level:2,title:"Alignments",slug:"alignments"},{level:2,title:"In WGPU",slug:"in-wgpu"},{level:2,title:"std140 (since GLSL 1.4, OpenGL 3.1)",slug:"std140-since-glsl-1-4-opengl-3-1"},{level:3,title:"crates to make your struct compatible with std140",slug:"crates-to-make-your-struct-compatible-with-std140"},{level:2,title:"std430 (since GLSL 4.3, OpenGL 4.3)",slug:"std430-since-glsl-4-3-opengl-4-3"},{level:3,title:"crates to make yuor struct compatible with std430",slug:"crates-to-make-yuor-struct-compatible-with-std430"}],lastUpdated:"11/21/2020, 8:16:07 PM"},{title:"Compute Example: Tangents and Bitangents",frontmatter:{meta:[{property:"article:modified_time",content:"2021-02-12T06:29:40.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Compute Example: Tangents and Bitangents"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/compute/"},{name:"twitter:title",content:"Compute Example: Tangents and Bitangents"},{name:"twitter:url",content:"/showcase/compute/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/compute/",relativePath:"showcase/compute/README.md",key:"v-22582db0",path:"/showcase/compute/",headers:[{level:2,title:"Possible Improvements",slug:"possible-improvements"},{level:2,title:"Results",slug:"results"}],lastUpdated:"2/12/2021, 6:29:40 AM"},{title:"Creating gifs",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Creating gifs"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/gifs/"},{name:"twitter:title",content:"Creating gifs"},{name:"twitter:url",content:"/showcase/gifs/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/gifs/",relativePath:"showcase/gifs/README.md",key:"v-39635cd4",path:"/showcase/gifs/",headers:[{level:2,title:"How are we making the GIF?",slug:"how-are-we-making-the-gif"},{level:2,title:"How do we make the frames?",slug:"how-do-we-make-the-frames"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"Basic Imgui Demo",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Basic Imgui Demo"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/imgui-demo/"},{name:"twitter:title",content:"Basic Imgui Demo"},{name:"twitter:url",content:"/showcase/imgui-demo/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-7ded8e00",path:"/showcase/imgui-demo/",lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Pong",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Pong"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/pong/"},{name:"twitter:title",content:"Pong"},{name:"twitter:url",content:"/showcase/pong/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/pong/",relativePath:"showcase/pong/README.md",key:"v-06f2dc82",path:"/showcase/pong/",headers:[{level:2,title:"The Architecture",slug:"the-architecture"},{level:2,title:"Input",slug:"input"},{level:2,title:"Render",slug:"render"},{level:2,title:"Sound",slug:"sound"},{level:2,title:"Summary",slug:"summary"}],lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Wgpu without a window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Wgpu without a window"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/windowless/"},{name:"twitter:title",content:"Wgpu without a window"},{name:"twitter:url",content:"/showcase/windowless/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/windowless/",relativePath:"showcase/windowless/README.md",key:"v-9fe692c0",path:"/showcase/windowless/",headers:[{level:2,title:"So what do we need to do?",slug:"so-what-do-we-need-to-do"},{level:2,title:"A triangle without a window",slug:"a-triangle-without-a-window"},{level:2,title:"Getting data out of a buffer",slug:"getting-data-out-of-a-buffer"},{level:2,title:"Main is not asyncable",slug:"main-is-not-asyncable"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"Coming Soon!",frontmatter:{meta:[{property:"article:modified_time",content:"2020-09-25T21:57:57.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Coming Soon!"},{property:"og:type",content:"website"},{property:"og:url",content:"/todo.html"},{name:"twitter:title",content:"Coming Soon!"},{name:"twitter:url",content:"/todo.html"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/todo.html",relativePath:"todo.md",key:"v-b2ccea3a",path:"/todo.html",lastUpdated:"9/25/2020, 9:57:57 PM"}],themeConfig:{author:{name:"Benjamin R Hansen",twitter:"https://twitter.com/sotrh760"},displayAllHeaders:!1,lastUpdated:"Last Updated",sidebar:["/",{title:"Beginner",collapsable:!1,children:["/beginner/tutorial1-window/","/beginner/tutorial2-swapchain/","/beginner/tutorial3-pipeline/","/beginner/tutorial4-buffer/","/beginner/tutorial5-textures/","/beginner/tutorial6-uniforms/","/beginner/tutorial7-instancing/","/beginner/tutorial8-depth/","/beginner/tutorial9-models/"]},{title:"Intermediate",collapsable:!1,children:["/intermediate/tutorial10-lighting/","/intermediate/tutorial11-normals/","/intermediate/tutorial12-camera/","/intermediate/tutorial13-threading/"]},{title:"Showcase",collapsable:!0,children:["/showcase/","/showcase/windowless/","/showcase/gifs/","/showcase/pong/","/showcase/compute/","/showcase/alignment/","/showcase/imgui-demo/"]},"/news/"]}};n(147);Ro.component("AutoGithubLink",(function(){return n.e(22).then(n.bind(null,251))})),Ro.component("RecentArticles",(function(){return n.e(9).then(n.bind(null,252))})),Ro.component("Badge",(function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,276))}));n(148),n(149);var is={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:function(){return{scrollTop:null}},computed:{show:function(){return this.scrollTop>this.threshold}},mounted:function(){var t=this;this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Va()((function(){t.scrollTop=t.getScrollTop()}),100))},methods:{getScrollTop:function(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},as=(n(150),Object(Ja.a)(is,(function(){var t=this.$createElement,e=this._self._c||t;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5fd4ef0c",null).exports),ss=[{},function(t){t.Vue.mixin({computed:{$dataBlock:function(){return this.$options.__data__block__}}})},{},{},function(t){t.Vue.component("CodeCopy",Qa)},function(t){t.Vue.component("BackToTop",as)}],cs=["BackToTop"];n(114);function us(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function ls(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function fs(t,e,n){return e&&ls(t.prototype,e),n&&ls(t,n),t}function ps(t,e){return(ps=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function ds(t){return(ds=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function hs(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function vs(t,e){return!e||"object"!==ba(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var ms=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&ps(t,e)}(r,t);var e,n=(e=r,function(){var t,n=ds(e);if(hs()){var r=ds(this).constructor;t=Reflect.construct(n,arguments,r)}else t=n.apply(this,arguments);return vs(this,t)});function r(){return us(this,r),n.apply(this,arguments)}return r}(function(){function t(){us(this,t),this.store=new Ro({data:{state:{}}})}return fs(t,[{key:"$get",value:function(t){return this.store.state[t]}},{key:"$set",value:function(t,e){Ro.set(this.store.state,t,e)}},{key:"$emit",value:function(){var t;(t=this.store).$emit.apply(t,arguments)}},{key:"$on",value:function(){var t;(t=this.store).$on.apply(t,arguments)}}]),t}());Object.assign(ms.prototype,{getPageAsyncComponent:Ia,getLayoutAsyncComponent:Ma,getAsyncComponent:Da,getVueComponent:Na});var gs={install:function(t){var e=new ms;t.$vuepress=e,t.prototype.$vuepress=e}};function ys(t){t.beforeEach((function(e,n,r){if(bs(t,e.path))r();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){var o=e.path.replace(/\/$/,"")+".html";bs(t,o)?r(o):r()}else r();else{var i=e.path+"/",a=e.path+".html";bs(t,a)?r(a):bs(t,i)?r(i):r()}}))}function bs(t,e){return t.options.routes.filter((function(t){return t.path.toLowerCase()===e.toLowerCase()})).length>0}var ws={props:{pageKey:String,slotKey:{type:String,default:"default"}},render:function(t){var e=this.pageKey||this.$parent.$page.key;return Ba("pageKey",e),Ro.component(e)||Ro.component(e,Ia(e)),Ro.component(e)?t(e):t("")}},_s={functional:!0,props:{slotKey:String,required:!0},render:function(t,e){var n=e.props,r=e.slots;return t("div",{class:["content__".concat(n.slotKey)]},r()[n.slotKey])}},xs=(n(151),Object(Ja.a)({},(function(t,e){var n=e._c;return n("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[n("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),e._v(" "),n("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])}),[],!0,null,null,null).exports);function Ss(){return(Ss=o(regeneratorRuntime.mark((function t(e){var n,r,o,i;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:os.routerBase||os.base,ys(r=new ga({base:n,mode:"history",fallback:!1,routes:rs,scrollBehavior:function(t,e,n){return n||(t.hash?!Ro.$vuepress.$get("disableScrollBehavior")&&{selector:t.hash}:{x:0,y:0})}})),o={},t.prev=4,t.next=7,Promise.all(ss.filter((function(t){return"function"==typeof t})).map((function(t){return t({Vue:Ro,options:o,router:r,siteData:os,isServer:e})})));case 7:t.next=12;break;case 9:t.prev=9,t.t0=t.catch(4),console.error(t.t0);case 12:return i=new Ro(Object.assign(o,{router:r,render:function(t){return t("div",{attrs:{id:"app"}},[t("RouterView",{ref:"layout"}),t("div",{class:"global-ui"},cs.map((function(e){return t(e)})))])}})),t.abrupt("return",{app:i,router:r});case 14:case"end":return t.stop()}}),t,null,[[4,9]])})))).apply(this,arguments)}Ro.config.productionTip=!1,Ro.use(ga),Ro.use(gs),Ro.mixin(function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Ro;ya(e),n.$vuepress.$set("siteData",e);var r=t(n.$vuepress.$get("siteData")),o=new r,i=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(i).reduce((function(t,e){return e.startsWith("$")&&(t[e]=i[e].get),t}),a),{computed:a}}((function(t){return function(){function e(){us(this,e)}return fs(e,[{key:"setPage",value:function(t){this.__page=t}},{key:"$site",get:function(){return t}},{key:"$themeConfig",get:function(){return this.$site.themeConfig}},{key:"$frontmatter",get:function(){return this.$page.frontmatter}},{key:"$localeConfig",get:function(){var t,e,n=this.$site.locales,r=void 0===n?{}:n;for(var o in r)"/"===o?e=r[o]:0===this.$page.path.indexOf(o)&&(t=r[o]);return t||e||{}}},{key:"$siteTitle",get:function(){return this.$localeConfig.title||this.$site.title||""}},{key:"$title",get:function(){var t=this.$page,e=this.$page.frontmatter.metaTitle;if("string"==typeof e)return e;var n=this.$siteTitle,r=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?r?r+" | "+n:n:r||"VuePress"}},{key:"$description",get:function(){var t=function(t){if(t){var e=t.filter((function(t){return"description"===t.name}))[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}},{key:"$lang",get:function(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}},{key:"$localePath",get:function(){return this.$localeConfig.path||"/"}},{key:"$themeLocaleConfig",get:function(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}},{key:"$page",get:function(){return this.__page?this.__page:function(t,e){for(var n=0;n<t.length;n++){var r=t[n];if(r.path.toLowerCase()===e.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}}]),e}()}),os)),Ro.component("Content",ws),Ro.component("ContentSlotsDistributor",_s),Ro.component("OutboundLink",xs),Ro.component("ClientOnly",{functional:!0,render:function(t,e){var n=e.parent,r=e.children;if(n._isMounted)return r;n.$once("hook:mounted",(function(){n.$forceUpdate()}))}}),Ro.component("Layout",Ma("Layout")),Ro.component("NotFound",Ma("NotFound")),Ro.prototype.$withBase=function(t){var e=this.$site.base;return"/"===t.charAt(0)?e+t.slice(1):t},window.__VUEPRESS__={version:"1.4.0",hash:"c527e8e"},function(t){return Ss.apply(this,arguments)}(!1).then((function(t){var e=t.app;t.router.onReady((function(){e.$mount("#app")}))}))}]);
\ No newline at end of file
+  */function Io(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function Mo(t,e){return e instanceof t||e&&(e.name===t.name||e._name===t._name)}function Do(t,e){for(var n in e)t[n]=e[n];return t}var No={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,r=e.children,o=e.parent,i=e.data;i.routerView=!0;for(var a=o.$createElement,s=n.name,c=o.$route,u=o._routerViewCache||(o._routerViewCache={}),l=0,f=!1;o&&o._routerRoot!==o;){var p=o.$vnode?o.$vnode.data:{};p.routerView&&l++,p.keepAlive&&o._directInactive&&o._inactive&&(f=!0),o=o.$parent}if(i.routerViewDepth=l,f){var d=u[s],h=d&&d.component;return h?(d.configProps&&Uo(h,i,d.route,d.configProps),a(h,i,r)):a()}var v=c.matched[l],m=v&&v.components[s];if(!v||!m)return u[s]=null,a();u[s]={component:m},i.registerRouteInstance=function(t,e){var n=v.instances[s];(e&&n!==t||!e&&n===t)&&(v.instances[s]=e)},(i.hook||(i.hook={})).prepatch=function(t,e){v.instances[s]=e.componentInstance},i.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==v.instances[s]&&(v.instances[s]=t.componentInstance)};var g=v.props&&v.props[s];return g&&(Do(u[s],{route:c,configProps:g}),Uo(m,i,c,g)),a(m,i,r)}};function Uo(t,e,n,r){var o=e.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(n,r);if(o){o=e.props=Do({},o);var i=e.attrs=e.attrs||{};for(var a in o)t.props&&a in t.props||(i[a]=o[a],delete o[a])}}var Bo=/[!'()*]/g,Fo=function(t){return"%"+t.charCodeAt(0).toString(16)},Wo=/%2C/g,Ho=function(t){return encodeURIComponent(t).replace(Bo,Fo).replace(Wo,",")},Vo=decodeURIComponent;function zo(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(t){var n=t.replace(/\+/g," ").split("="),r=Vo(n.shift()),o=n.length>0?Vo(n.join("=")):null;void 0===e[r]?e[r]=o:Array.isArray(e[r])?e[r].push(o):e[r]=[e[r],o]})),e):e}function Go(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return Ho(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(Ho(e)):r.push(Ho(e)+"="+Ho(t)))})),r.join("&")}return Ho(e)+"="+Ho(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var qo=/\/?$/;function Zo(t,e,n,r){var o=r&&r.options.stringifyQuery,i=e.query||{};try{i=Ko(i)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:i,params:e.params||{},fullPath:Jo(e,o),matched:t?Yo(t):[]};return n&&(a.redirectedFrom=Jo(n,o)),Object.freeze(a)}function Ko(t){if(Array.isArray(t))return t.map(Ko);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=Ko(t[n]);return e}return t}var Xo=Zo(null,{path:"/"});function Yo(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function Jo(t,e){var n=t.path,r=t.query;void 0===r&&(r={});var o=t.hash;return void 0===o&&(o=""),(n||"/")+(e||Go)(r)+o}function Qo(t,e){return e===Xo?t===e:!!e&&(t.path&&e.path?t.path.replace(qo,"")===e.path.replace(qo,"")&&t.hash===e.hash&&ti(t.query,e.query):!(!t.name||!e.name)&&(t.name===e.name&&t.hash===e.hash&&ti(t.query,e.query)&&ti(t.params,e.params)))}function ti(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t),r=Object.keys(e);return n.length===r.length&&n.every((function(n){var r=t[n],o=e[n];return"object"==typeof r&&"object"==typeof o?ti(r,o):String(r)===String(o)}))}function ei(t,e,n){var r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;var o=e.split("/");n&&o[o.length-1]||o.pop();for(var i=t.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var s=i[a];".."===s?o.pop():"."!==s&&o.push(s)}return""!==o[0]&&o.unshift(""),o.join("/")}function ni(t){return t.replace(/\/\//g,"/")}var ri=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)},oi=yi,ii=li,ai=function(t,e){return pi(li(t,e))},si=pi,ci=gi,ui=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function li(t,e){for(var n,r=[],o=0,i=0,a="",s=e&&e.delimiter||"/";null!=(n=ui.exec(t));){var c=n[0],u=n[1],l=n.index;if(a+=t.slice(i,l),i=l+c.length,u)a+=u[1];else{var f=t[i],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var y=null!=p&&null!=f&&f!==p,b="+"===m||"*"===m,w="?"===m||"*"===m,_=n[2]||s,x=h||v;r.push({name:d||o++,prefix:p||"",delimiter:_,optional:w,repeat:b,partial:y,asterisk:!!g,pattern:x?hi(x):g?".*":"[^"+di(_)+"]+?"})}}return i<t.length&&(a+=t.substr(i)),a&&r.push(a),r}function fi(t){return encodeURI(t).replace(/[\/?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function pi(t){for(var e=new Array(t.length),n=0;n<t.length;n++)"object"==typeof t[n]&&(e[n]=new RegExp("^(?:"+t[n].pattern+")$"));return function(n,r){for(var o="",i=n||{},a=(r||{}).pretty?fi:encodeURIComponent,s=0;s<t.length;s++){var c=t[s];if("string"!=typeof c){var u,l=i[c.name];if(null==l){if(c.optional){c.partial&&(o+=c.prefix);continue}throw new TypeError('Expected "'+c.name+'" to be defined')}if(ri(l)){if(!c.repeat)throw new TypeError('Expected "'+c.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(0===l.length){if(c.optional)continue;throw new TypeError('Expected "'+c.name+'" to not be empty')}for(var f=0;f<l.length;f++){if(u=a(l[f]),!e[s].test(u))throw new TypeError('Expected all "'+c.name+'" to match "'+c.pattern+'", but received `'+JSON.stringify(u)+"`");o+=(0===f?c.prefix:c.delimiter)+u}}else{if(u=c.asterisk?encodeURI(l).replace(/[?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()})):a(l),!e[s].test(u))throw new TypeError('Expected "'+c.name+'" to match "'+c.pattern+'", but received "'+u+'"');o+=c.prefix+u}}else o+=c}return o}}function di(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function hi(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function vi(t,e){return t.keys=e,t}function mi(t){return t.sensitive?"":"i"}function gi(t,e,n){ri(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<t.length;a++){var s=t[a];if("string"==typeof s)i+=di(s);else{var c=di(s.prefix),u="(?:"+s.pattern+")";e.push(s),s.repeat&&(u+="(?:"+c+u+")*"),i+=u=s.optional?s.partial?c+"("+u+")?":"(?:"+c+"("+u+"))?":c+"("+u+")"}}var l=di(n.delimiter||"/"),f=i.slice(-l.length)===l;return r||(i=(f?i.slice(0,-l.length):i)+"(?:"+l+"(?=$))?"),i+=o?"$":r&&f?"":"(?="+l+"|$)",vi(new RegExp("^"+i,mi(n)),e)}function yi(t,e,n){return ri(e)||(n=e||n,e=[]),n=n||{},t instanceof RegExp?function(t,e){var n=t.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)e.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return vi(t,e)}(t,e):ri(t)?function(t,e,n){for(var r=[],o=0;o<t.length;o++)r.push(yi(t[o],e,n).source);return vi(new RegExp("(?:"+r.join("|")+")",mi(n)),e)}(t,e,n):function(t,e,n){return gi(li(t,n),e,n)}(t,e,n)}oi.parse=ii,oi.compile=ai,oi.tokensToFunction=si,oi.tokensToRegExp=ci;var bi=Object.create(null);function wi(t,e,n){e=e||{};try{var r=bi[t]||(bi[t]=oi.compile(t));return"string"==typeof e.pathMatch&&(e[0]=e.pathMatch),r(e,{pretty:!0})}catch(t){return""}finally{delete e[0]}}function _i(t,e,n,r){var o="string"==typeof t?{path:t}:t;if(o._normalized)return o;if(o.name){var i=(o=Do({},t)).params;return i&&"object"==typeof i&&(o.params=Do({},i)),o}if(!o.path&&o.params&&e){(o=Do({},o))._normalized=!0;var a=Do(Do({},e.params),o.params);if(e.name)o.name=e.name,o.params=a;else if(e.matched.length){var s=e.matched[e.matched.length-1].path;o.path=wi(s,a,e.path)}else 0;return o}var c=function(t){var e="",n="",r=t.indexOf("#");r>=0&&(e=t.slice(r),t=t.slice(0,r));var o=t.indexOf("?");return o>=0&&(n=t.slice(o+1),t=t.slice(0,o)),{path:t,query:n,hash:e}}(o.path||""),u=e&&e.path||"/",l=c.path?ei(c.path,u,n||o.append):u,f=function(t,e,n){void 0===e&&(e={});var r,o=n||zo;try{r=o(t||"")}catch(t){r={}}for(var i in e)r[i]=e[i];return r}(c.query,o.query,r&&r.options.parseQuery),p=o.hash||c.hash;return p&&"#"!==p.charAt(0)&&(p="#"+p),{_normalized:!0,path:l,query:f,hash:p}}var xi,Si=function(){},Ei={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},exact:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,s=o.href,c={},u=n.options.linkActiveClass,l=n.options.linkExactActiveClass,f=null==u?"router-link-active":u,p=null==l?"router-link-exact-active":l,d=null==this.activeClass?f:this.activeClass,h=null==this.exactActiveClass?p:this.exactActiveClass,v=a.redirectedFrom?Zo(null,_i(a.redirectedFrom),null,n):a;c[h]=Qo(r,v),c[d]=this.exact?c[h]:function(t,e){return 0===t.path.replace(qo,"/").indexOf(e.path.replace(qo,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(r,v);var m=function(t){Oi(t)&&(e.replace?n.replace(i,Si):n.push(i,Si))},g={click:Oi};Array.isArray(this.event)?this.event.forEach((function(t){g[t]=m})):g[this.event]=m;var y={class:c},b=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:a,navigate:m,isActive:c[d],isExactActive:c[h]});if(b){if(1===b.length)return b[0];if(b.length>1||!b.length)return 0===b.length?t():t("span",{},b)}if("a"===this.tag)y.on=g,y.attrs={href:s};else{var w=function t(e){var n;if(e)for(var r=0;r<e.length;r++){if("a"===(n=e[r]).tag)return n;if(n.children&&(n=t(n.children)))return n}}(this.$slots.default);if(w){w.isStatic=!1;var _=w.data=Do({},w.data);for(var x in _.on=_.on||{},_.on){var S=_.on[x];x in g&&(_.on[x]=Array.isArray(S)?S:[S])}for(var E in g)E in _.on?_.on[E].push(g[E]):_.on[E]=m;(w.data.attrs=Do({},w.data.attrs)).href=s}else y.on=g}return t(this.tag,y,this.$slots.default)}};function Oi(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}var ki="undefined"!=typeof window;function Ci(t,e,n,r){var o=e||[],i=n||Object.create(null),a=r||Object.create(null);t.forEach((function(t){!function t(e,n,r,o,i,a){var s=o.path,c=o.name;0;var u=o.pathToRegexpOptions||{},l=function(t,e,n){n||(t=t.replace(/\/$/,""));if("/"===t[0])return t;if(null==e)return t;return ni(e.path+"/"+t)}(s,i,u.strict);"boolean"==typeof o.caseSensitive&&(u.sensitive=o.caseSensitive);var f={path:l,regex:Ai(l,u),components:o.components||{default:o.component},instances:{},name:c,parent:i,matchAs:a,redirect:o.redirect,beforeEnter:o.beforeEnter,meta:o.meta||{},props:null==o.props?{}:o.components?o.props:{default:o.props}};o.children&&o.children.forEach((function(o){var i=a?ni(a+"/"+o.path):void 0;t(e,n,r,o,f,i)}));n[f.path]||(e.push(f.path),n[f.path]=f);if(void 0!==o.alias)for(var p=Array.isArray(o.alias)?o.alias:[o.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:o.children};t(e,n,r,h,i,f.path||"/")}c&&(r[c]||(r[c]=f))}(o,i,a,t)}));for(var s=0,c=o.length;s<c;s++)"*"===o[s]&&(o.push(o.splice(s,1)[0]),c--,s--);return{pathList:o,pathMap:i,nameMap:a}}function Ai(t,e){return oi(t,[],e)}function Ti(t,e){var n=Ci(t),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(t,n,a){var s=_i(t,n,!1,e),u=s.name;if(u){var l=i[u];if(!l)return c(null,s);var f=l.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if("object"!=typeof s.params&&(s.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in s.params)&&f.indexOf(p)>-1&&(s.params[p]=n.params[p]);return s.path=wi(l.path,s.params),c(l,s,a)}if(s.path){s.params={};for(var d=0;d<r.length;d++){var h=r[d],v=o[h];if($i(v.regex,s.path,s.params))return c(v,s,a)}}return c(null,s)}function s(t,n){var r=t.redirect,o="function"==typeof r?r(Zo(t,n,null,e)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return c(null,n);var s=o,u=s.name,l=s.path,f=n.query,p=n.hash,d=n.params;if(f=s.hasOwnProperty("query")?s.query:f,p=s.hasOwnProperty("hash")?s.hash:p,d=s.hasOwnProperty("params")?s.params:d,u){i[u];return a({_normalized:!0,name:u,query:f,hash:p,params:d},void 0,n)}if(l){var h=function(t,e){return ei(t,e.parent?e.parent.path:"/",!0)}(l,t);return a({_normalized:!0,path:wi(h,d),query:f,hash:p},void 0,n)}return c(null,n)}function c(t,n,r){return t&&t.redirect?s(t,r||n):t&&t.matchAs?function(t,e,n){var r=a({_normalized:!0,path:wi(n,e.params)});if(r){var o=r.matched,i=o[o.length-1];return e.params=r.params,c(i,e)}return c(null,e)}(0,n,t.matchAs):Zo(t,n,r,e)}return{match:a,addRoutes:function(t){Ci(t,r,o,i)}}}function $i(t,e,n){var r=e.match(t);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=t.keys[o-1],s="string"==typeof r[o]?decodeURIComponent(r[o]):r[o];a&&(n[a.name||"pathMatch"]=s)}return!0}var ji=ki&&window.performance&&window.performance.now?window.performance:Date;function Pi(){return ji.now().toFixed(3)}var Li=Pi();function Ri(){return Li}function Ii(t){return Li=t}var Mi=Object.create(null);function Di(){var t=window.location.protocol+"//"+window.location.host,e=window.location.href.replace(t,""),n=Do({},window.history.state);n.key=Ri(),window.history.replaceState(n,"",e),window.addEventListener("popstate",(function(t){Ui(),t.state&&t.state.key&&Ii(t.state.key)}))}function Ni(t,e,n,r){if(t.app){var o=t.options.scrollBehavior;o&&t.app.$nextTick((function(){var i=function(){var t=Ri();if(t)return Mi[t]}(),a=o.call(t,e,n,r?i:null);a&&("function"==typeof a.then?a.then((function(t){Vi(t,i)})).catch((function(t){0})):Vi(a,i))}))}}function Ui(){var t=Ri();t&&(Mi[t]={x:window.pageXOffset,y:window.pageYOffset})}function Bi(t){return Wi(t.x)||Wi(t.y)}function Fi(t){return{x:Wi(t.x)?t.x:window.pageXOffset,y:Wi(t.y)?t.y:window.pageYOffset}}function Wi(t){return"number"==typeof t}var Hi=/^#\d/;function Vi(t,e){var n,r="object"==typeof t;if(r&&"string"==typeof t.selector){var o=Hi.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(o){var i=t.offset&&"object"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(o,i={x:Wi((n=i).x)?n.x:0,y:Wi(n.y)?n.y:0})}else Bi(t)&&(e=Fi(t))}else r&&Bi(t)&&(e=Fi(t));e&&window.scrollTo(e.x,e.y)}var zi,Gi=ki&&((-1===(zi=window.navigator.userAgent).indexOf("Android 2.")&&-1===zi.indexOf("Android 4.0")||-1===zi.indexOf("Mobile Safari")||-1!==zi.indexOf("Chrome")||-1!==zi.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history);function qi(t,e){Ui();var n=window.history;try{if(e){var r=Do({},n.state);r.key=Ri(),n.replaceState(r,"",t)}else n.pushState({key:Ii(Pi())},"",t)}catch(n){window.location[e?"replace":"assign"](t)}}function Zi(t){qi(t,!0)}function Ki(t,e,n){var r=function(o){o>=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}function Xi(t){return function(e,n,r){var o=!1,i=0,a=null;Yi(t,(function(t,e,n,s){if("function"==typeof t&&void 0===t.cid){o=!0,i++;var c,u=ta((function(e){var o;((o=e).__esModule||Qi&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:xi.extend(e),n.components[s]=e,--i<=0&&r()})),l=ta((function(t){var e="Failed to resolve async component "+s+": "+t;a||(a=Io(t)?t:new Error(e),r(a))}));try{c=t(u,l)}catch(t){l(t)}if(c)if("function"==typeof c.then)c.then(u,l);else{var f=c.component;f&&"function"==typeof f.then&&f.then(u,l)}}})),o||r()}}function Yi(t,e){return Ji(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Ji(t){return Array.prototype.concat.apply([],t)}var Qi="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function ta(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var ea=function(t){function e(e){t.call(this),this.name=this._name="NavigationDuplicated",this.message='Navigating to current location ("'+e.fullPath+'") is not allowed',Object.defineProperty(this,"stack",{value:(new t).stack,writable:!0,configurable:!0})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(Error);ea._name="NavigationDuplicated";var na=function(t,e){this.router=t,this.base=function(t){if(!t)if(ki){var e=document.querySelector("base");t=(t=e&&e.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else t="/";"/"!==t.charAt(0)&&(t="/"+t);return t.replace(/\/$/,"")}(e),this.current=Xo,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function ra(t,e,n,r){var o=Yi(t,(function(t,r,o,i){var a=function(t,e){"function"!=typeof t&&(t=xi.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,r,o,i)})):n(a,r,o,i)}));return Ji(r?o.reverse():o)}function oa(t,e){if(e)return function(){return t.apply(e,arguments)}}na.prototype.listen=function(t){this.cb=t},na.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},na.prototype.onError=function(t){this.errorCbs.push(t)},na.prototype.transitionTo=function(t,e,n){var r=this,o=this.router.match(t,this.current);this.confirmTransition(o,(function(){r.updateRoute(o),e&&e(o),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(t){t(o)})))}),(function(t){n&&n(t),t&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(e){e(t)})))}))},na.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current,i=function(t){!Mo(ea,t)&&Io(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)};if(Qo(t,o)&&t.matched.length===o.matched.length)return this.ensureURL(),i(new ea(t));var a=function(t,e){var n,r=Math.max(t.length,e.length);for(n=0;n<r&&t[n]===e[n];n++);return{updated:e.slice(0,n),activated:e.slice(n),deactivated:t.slice(n)}}(this.current.matched,t.matched),s=a.updated,c=a.deactivated,u=a.activated,l=[].concat(function(t){return ra(t,"beforeRouteLeave",oa,!0)}(c),this.router.beforeHooks,function(t){return ra(t,"beforeRouteUpdate",oa)}(s),u.map((function(t){return t.beforeEnter})),Xi(u));this.pending=t;var f=function(e,n){if(r.pending!==t)return i();try{e(t,o,(function(t){!1===t||Io(t)?(r.ensureURL(!0),i(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(i(),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(t){i(t)}};Ki(l,f,(function(){var n=[];Ki(function(t,e,n){return ra(t,"beforeRouteEnter",(function(t,r,o,i){return function(t,e,n,r,o){return function(i,a,s){return t(i,a,(function(t){"function"==typeof t&&r.push((function(){!function t(e,n,r,o){n[r]&&!n[r]._isBeingDestroyed?e(n[r]):o()&&setTimeout((function(){t(e,n,r,o)}),16)}(t,e.instances,n,o)})),s(t)}))}}(t,o,i,e,n)}))}(u,n,(function(){return r.current===t})).concat(r.router.resolveHooks),f,(function(){if(r.pending!==t)return i();r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){n.forEach((function(t){t()}))}))}))}))},na.prototype.updateRoute=function(t){var e=this.current;this.current=t,this.cb&&this.cb(t),this.router.afterHooks.forEach((function(n){n&&n(t,e)}))};var ia=function(t){function e(e,n){var r=this;t.call(this,e,n);var o=e.options.scrollBehavior,i=Gi&&o;i&&Di();var a=aa(this.base);window.addEventListener("popstate",(function(t){var n=r.current,o=aa(r.base);r.current===Xo&&o===a||r.transitionTo(o,(function(t){i&&Ni(e,t,n,!0)}))}))}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){qi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Zi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(aa(this.base)!==this.current.fullPath){var e=ni(this.base+this.current.fullPath);t?qi(e):Zi(e)}},e.prototype.getCurrentLocation=function(){return aa(this.base)},e}(na);function aa(t){var e=decodeURI(window.location.pathname);return t&&0===e.indexOf(t)&&(e=e.slice(t.length)),(e||"/")+window.location.search+window.location.hash}var sa=function(t){function e(e,n,r){t.call(this,e,n),r&&function(t){var e=aa(t);if(!/^\/#/.test(e))return window.location.replace(ni(t+"/#"+e)),!0}(this.base)||ca()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this,e=this.router.options.scrollBehavior,n=Gi&&e;n&&Di(),window.addEventListener(Gi?"popstate":"hashchange",(function(){var e=t.current;ca()&&t.transitionTo(ua(),(function(r){n&&Ni(t.router,r,e,!0),Gi||pa(r.fullPath)}))}))},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){fa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){pa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;ua()!==e&&(t?fa(e):pa(e))},e.prototype.getCurrentLocation=function(){return ua()},e}(na);function ca(){var t=ua();return"/"===t.charAt(0)||(pa("/"+t),!1)}function ua(){var t=window.location.href,e=t.indexOf("#");if(e<0)return"";var n=(t=t.slice(e+1)).indexOf("?");if(n<0){var r=t.indexOf("#");t=r>-1?decodeURI(t.slice(0,r))+t.slice(r):decodeURI(t)}else t=decodeURI(t.slice(0,n))+t.slice(n);return t}function la(t){var e=window.location.href,n=e.indexOf("#");return(n>=0?e.slice(0,n):e)+"#"+t}function fa(t){Gi?qi(la(t)):window.location.hash=t}function pa(t){Gi?Zi(la(t)):window.location.replace(la(t))}var da=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){e.index=n,e.updateRoute(r)}),(function(t){Mo(ea,t)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(na),ha=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ti(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!Gi&&!1!==t.fallback,this.fallback&&(e="hash"),ki||(e="abstract"),this.mode=e,e){case"history":this.history=new ia(this,t.base);break;case"hash":this.history=new sa(this,t.base,this.fallback);break;case"abstract":this.history=new da(this,t.base);break;default:0}},va={currentRoute:{configurable:!0}};function ma(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}ha.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},va.currentRoute.get=function(){return this.history&&this.history.current},ha.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null)})),!this.app){this.app=t;var n=this.history;if(n instanceof ia)n.transitionTo(n.getCurrentLocation());else if(n instanceof sa){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},ha.prototype.beforeEach=function(t){return ma(this.beforeHooks,t)},ha.prototype.beforeResolve=function(t){return ma(this.resolveHooks,t)},ha.prototype.afterEach=function(t){return ma(this.afterHooks,t)},ha.prototype.onReady=function(t,e){this.history.onReady(t,e)},ha.prototype.onError=function(t){this.history.onError(t)},ha.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},ha.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},ha.prototype.go=function(t){this.history.go(t)},ha.prototype.back=function(){this.go(-1)},ha.prototype.forward=function(){this.go(1)},ha.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},ha.prototype.resolve=function(t,e,n){var r=_i(t,e=e||this.history.current,n,this),o=this.match(r,e),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(t,e,n){var r="hash"===n?"#"+e:e;return t?ni(t+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},ha.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==Xo&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ha.prototype,va),ha.install=function t(e){if(!t.installed||xi!==e){t.installed=!0,xi=e;var n=function(t){return void 0!==t},r=function(t,e){var r=t.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",No),e.component("RouterLink",Ei);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},ha.version="3.1.6",ki&&window.Vue&&window.Vue.use(ha);var ga=ha;n(50),n(127),n(129),n(130),n(131),n(69),n(132),n(51);function ya(t){t.locales&&Object.keys(t.locales).forEach((function(e){t.locales[e].path=e})),Object.freeze(t)}n(108),n(133),n(22),n(110),n(47);function ba(t){return(ba="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var wa=n(43),_a={NotFound:function(){return n.e(23).then(n.bind(null,250))},Layout:function(){return Promise.all([n.e(0),n.e(2)]).then(n.bind(null,249))}},xa={"v-64a170d8":function(){return n.e(24).then(n.bind(null,253))},"v-078c5be8":function(){return n.e(25).then(n.bind(null,254))},"v-5655e588":function(){return n.e(11).then(n.bind(null,255))},"v-4ef07d88":function(){return n.e(12).then(n.bind(null,256))},"v-64577bce":function(){return n.e(6).then(n.bind(null,257))},"v-3f6f84e0":function(){return n.e(5).then(n.bind(null,258))},"v-2524cb94":function(){return n.e(15).then(n.bind(null,259))},"v-56b3c5a0":function(){return n.e(16).then(n.bind(null,260))},"v-68f30830":function(){return n.e(13).then(n.bind(null,261))},"v-b07002f8":function(){return n.e(8).then(n.bind(null,262))},"v-a06af470":function(){return n.e(3).then(n.bind(null,263))},"v-27757210":function(){return n.e(4).then(n.bind(null,264))},"v-20dff7a8":function(){return n.e(14).then(n.bind(null,265))},"v-1633bbb4":function(){return n.e(26).then(n.bind(null,266))},"v-70e651e8":function(){return n.e(17).then(n.bind(null,267))},"v-45ee3628":function(){return n.e(27).then(n.bind(null,268))},"v-a42e43b0":function(){return n.e(28).then(n.bind(null,269))},"v-22582db0":function(){return n.e(7).then(n.bind(null,270))},"v-39635cd4":function(){return n.e(18).then(n.bind(null,271))},"v-7ded8e00":function(){return n.e(19).then(n.bind(null,272))},"v-06f2dc82":function(){return n.e(20).then(n.bind(null,273))},"v-9fe692c0":function(){return n.e(21).then(n.bind(null,274))},"v-b2ccea3a":function(){return n.e(29).then(n.bind(null,275))}};function Sa(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var Ea=/-(\w)/g,Oa=Sa((function(t){return t.replace(Ea,(function(t,e){return e?e.toUpperCase():""}))})),ka=/\B([A-Z])/g,Ca=Sa((function(t){return t.replace(ka,"-$1").toLowerCase()})),Aa=Sa((function(t){return t.charAt(0).toUpperCase()+t.slice(1)}));function Ta(t,e){if(e)return t(e)?t(e):e.includes("-")?t(Aa(Oa(e))):t(Aa(e))||t(Ca(e))}var $a=Object.assign({},_a,xa),ja=function(t){return $a[t]},Pa=function(t){return xa[t]},La=function(t){return _a[t]},Ra=function(t){return Ro.component(t)};function Ia(t){return Ta(Pa,t)}function Ma(t){return Ta(La,t)}function Da(t){return Ta(ja,t)}function Na(t){return Ta(Ra,t)}function Ua(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return Promise.all(e.filter((function(t){return t})).map(function(){var t=o(regeneratorRuntime.mark((function t(e){var n;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Na(e)||!Da(e)){t.next=5;break}return t.next=3,Da(e)();case 3:n=t.sent,Ro.component(e,n.default);case 5:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()))}function Ba(t,e){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[t]=e)}n(100),n(102),n(67),n(136);var Fa={created:function(){this.$ssrContext&&(this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.description=this.$page.description||this.$description)},mounted:function(){this.currentMetaTags=new Set,this.updateMeta()},methods:{updateMeta:function(){var t=this;document.title=this.$title,document.documentElement.lang=this.$lang;var e=this.$page.frontmatter.meta||[],n=e.slice(0);0===e.filter((function(t){return"description"===t.name})).length&&n.push({name:"description",content:this.$description});var r=document.querySelectorAll('meta[name="description"]');r.length&&r.forEach((function(e){return t.currentMetaTags.add(e)})),this.currentMetaTags=new Set(Wa(n,this.currentMetaTags))}},watch:{$page:function(){this.updateMeta()}},beforeDestroy:function(){Wa(null,this.currentMetaTags)}};function Wa(t,e){if(e&&Object(wa.a)(e).forEach((function(t){document.head.removeChild(t)})),t)return t.map((function(t){var e=document.createElement("meta");return Object.keys(t).forEach((function(n){e.setAttribute(n,t[n])})),document.head.appendChild(e),e}))}n(106);var Ha=n(44),Va=n.n(Ha),za={mounted:function(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Va()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var t=this,e=[].slice.call(document.querySelectorAll(".sidebar-link")),n=[].slice.call(document.querySelectorAll(".header-anchor")).filter((function(t){return e.some((function(e){return e.hash===t.hash}))})),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),o=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),i=window.innerHeight+r,a=0;a<n.length;a++){var s=n[a],c=n[a+1],u=0===a&&0===r||r>=s.parentElement.offsetTop+10&&(!c||r<c.parentElement.offsetTop-10),l=decodeURIComponent(this.$route.hash);if(u&&l!==decodeURIComponent(s.hash)){var f=s;if(i===o)for(var p=a+1;p<n.length;p++)if(l===decodeURIComponent(n[p].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(f.hash),(function(){t.$nextTick((function(){t.$vuepress.$set("disableScrollBehavior",!1)}))}))}}}},beforeDestroy:function(){window.removeEventListener("scroll",this.onScroll)}},Ga=n(45),qa=n.n(Ga),Za={mounted:function(){var t=this;qa.a.configure({showSpinner:!1}),this.$router.beforeEach((function(t,e,n){t.path===e.path||Ro.component(t.name)||qa.a.start(),n()})),this.$router.afterEach((function(){qa.a.done(),t.isSidebarOpen=!1}))}};n(105);function Ka(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function Xa(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}n(117),n(118);var Ya={props:{parent:Object,code:String,options:{align:String,color:String,backgroundTransition:Boolean,backgroundColor:String,successText:String,staticIcon:Boolean}},data:function(){return{success:!1,originalBackground:null,originalTransition:null}},computed:{alignStyle:function(){var t={};return t[this.options.align]="7.5px",t},iconClass:function(){return this.options.staticIcon?"":"hover"}},mounted:function(){this.originalTransition=this.parent.style.transition,this.originalBackground=this.parent.style.background},beforeDestroy:function(){this.parent.style.transition=this.originalTransition,this.parent.style.background=this.originalBackground},methods:{hexToRgb:function(t){var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null},copyToClipboard:function(t){var e=this;if(navigator.clipboard)navigator.clipboard.writeText(this.code).then((function(){e.setSuccessTransitions()}),(function(){}));else{var n=document.createElement("textarea");document.body.appendChild(n),n.value=this.code,n.select(),document.execCommand("Copy"),n.remove(),this.setSuccessTransitions()}},setSuccessTransitions:function(){var t=this;if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";var e=this.hexToRgb(this.options.backgroundColor);this.parent.style.background="rgba(".concat(e.r,", ").concat(e.g,", ").concat(e.b,", 0.1)")}this.success=!0,this.successTimeout=setTimeout((function(){t.options.backgroundTransition&&(t.parent.style.background=t.originalBackground,t.parent.style.transition=t.originalTransition),t.success=!1}),500)}}},Ja=(n(145),n(10)),Qa=Object(Ja.a)(Ya,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"code-copy"},[n("svg",{class:t.iconClass,style:t.alignStyle,attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},on:{click:t.copyToClipboard}},[n("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),t._v(" "),n("path",{attrs:{fill:t.options.color,d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"}})]),t._v(" "),n("span",{class:t.success?"success":"",style:t.alignStyle},[t._v("\n        "+t._s(t.options.successText)+"\n    ")])])}),[],!1,null,"49140617",null).exports,ts=(n(146),[Fa,za,Za,{updated:function(){this.update()},methods:{update:function(){setTimeout((function(){document.querySelectorAll('div[class*="language-"] pre').forEach((function(t){if(!t.classList.contains("code-copy-added")){var e=new(Ro.extend(Qa));e.options=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Xa(Object(n),!0).forEach((function(e){Ka(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Xa(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},{align:"bottom",color:"#27b1ff",backgroundTransition:!0,backgroundColor:"#0075b8",successText:"Copied!",staticIcon:!1}),e.code=t.innerText,e.parent=t,e.$mount(),t.classList.add("code-copy-added"),t.appendChild(e.$el)}}))}),100)}}}]),es={name:"GlobalLayout",computed:{layout:function(){var t=this.getLayout();return Ba("layout",t),Ro.component(t)}},methods:{getLayout:function(){if(this.$page.path){var t=this.$page.frontmatter.layout;return t&&(this.$vuepress.getLayoutAsyncComponent(t)||this.$vuepress.getVueComponent(t))?t:"Layout"}return"NotFound"}}},ns=Object(Ja.a)(es,(function(){var t=this.$createElement;return(this._self._c||t)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(t,e,n){var r;switch(e){case"components":t[e]||(t[e]={}),Object.assign(t[e],n);break;case"mixins":t[e]||(t[e]=[]),(r=t[e]).push.apply(r,Object(wa.a)(n));break;default:throw new Error("Unknown option name.")}}(ns,"mixins",ts);var rs=[{name:"v-64a170d8",path:"/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64a170d8").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-078c5be8",path:"/beginner/tutorial1-window/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-078c5be8").then(n)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-5655e588",path:"/beginner/tutorial2-swapchain/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-5655e588").then(n)}},{path:"/beginner/tutorial2-swapchain/index.html",redirect:"/beginner/tutorial2-swapchain/"},{name:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-4ef07d88").then(n)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-64577bce",path:"/beginner/tutorial4-buffer/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64577bce").then(n)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-3f6f84e0").then(n)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-2524cb94").then(n)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-56b3c5a0").then(n)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-68f30830",path:"/beginner/tutorial8-depth/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-68f30830").then(n)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-b07002f8",path:"/beginner/tutorial9-models/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b07002f8").then(n)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-a06af470",path:"/intermediate/tutorial10-lighting/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a06af470").then(n)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-27757210",path:"/intermediate/tutorial11-normals/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-27757210").then(n)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-20dff7a8").then(n)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-1633bbb4").then(n)}},{path:"/intermediate/tutorial13-threading/index.html",redirect:"/intermediate/tutorial13-threading/"},{name:"v-70e651e8",path:"/news/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-70e651e8").then(n)}},{path:"/news/index.html",redirect:"/news/"},{name:"v-45ee3628",path:"/showcase/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-45ee3628").then(n)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-a42e43b0",path:"/showcase/alignment/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a42e43b0").then(n)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-22582db0",path:"/showcase/compute/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-22582db0").then(n)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-39635cd4",path:"/showcase/gifs/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-39635cd4").then(n)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-7ded8e00",path:"/showcase/imgui-demo/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-7ded8e00").then(n)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-06f2dc82",path:"/showcase/pong/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-06f2dc82").then(n)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-9fe692c0",path:"/showcase/windowless/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-9fe692c0").then(n)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-b2ccea3a",path:"/todo.html",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b2ccea3a").then(n)}},{path:"*",component:ns}],os={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",pages:[{title:"Introduction",frontmatter:{meta:[{property:"article:modified_time",content:"2021-03-20T13:35:03.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Introduction"},{property:"og:type",content:"website"},{property:"og:url",content:"/"},{name:"twitter:title",content:"Introduction"},{name:"twitter:url",content:"/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/",relativePath:"README.md",key:"v-64a170d8",path:"/",headers:[{level:2,title:"What is wgpu?",slug:"what-is-wgpu"},{level:2,title:"Why Rust?",slug:"why-rust"},{level:2,title:"Contribution and Support",slug:"contribution-and-support"},{level:2,title:"Special thanks to these patrons!",slug:"special-thanks-to-these-patrons"}],lastUpdated:"3/20/2021, 1:35:03 PM"},{title:"Dependencies and the window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Dependencies and the window"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial1-window/"},{name:"twitter:title",content:"Dependencies and the window"},{name:"twitter:url",content:"/beginner/tutorial1-window/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial1-window/",relativePath:"beginner/tutorial1-window/README.md",key:"v-078c5be8",path:"/beginner/tutorial1-window/",headers:[{level:2,title:"Boring, I know",slug:"boring-i-know"},{level:2,title:"What crates are we using?",slug:"what-crates-are-we-using"},{level:3,title:"Vulkan Portability Layer",slug:"vulkan-portability-layer"},{level:2,title:"The code",slug:"the-code"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"The Swapchain",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Swapchain"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:title",content:"The Swapchain"},{name:"twitter:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial2-swapchain/",relativePath:"beginner/tutorial2-swapchain/README.md",key:"v-5655e588",path:"/beginner/tutorial2-swapchain/",headers:[{level:2,title:"First, some house keeping: State",slug:"first-some-house-keeping-state"},{level:2,title:"State::new()",slug:"state-new"},{level:2,title:"resize()",slug:"resize"},{level:2,title:"input()",slug:"input"},{level:2,title:"update()",slug:"update"},{level:2,title:"render()",slug:"render"},{level:2,title:"Wait, what's going on with RenderPassDescriptor?",slug:"wait-what-s-going-on-with-renderpassdescriptor"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"The Pipeline",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T20:23:53.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Pipeline"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:title",content:"The Pipeline"},{name:"twitter:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial3-pipeline/",relativePath:"beginner/tutorial3-pipeline/README.md",key:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",headers:[{level:2,title:"What's a pipeline?",slug:"what-s-a-pipeline"},{level:2,title:"Wait shaders?",slug:"wait-shaders"},{level:2,title:"Vertex, fragment.. what are those?",slug:"vertex-fragment-what-are-those"},{level:2,title:"WGSL",slug:"wgsl"},{level:2,title:"Writing the shaders",slug:"writing-the-shaders"},{level:2,title:"How do we use the shaders?",slug:"how-do-we-use-the-shaders"},{level:2,title:"Using a pipeline",slug:"using-a-pipeline"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/24/2021, 8:23:53 PM"},{title:"Buffers and Indices",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-19T02:38:15.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Buffers and Indices"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:title",content:"Buffers and Indices"},{name:"twitter:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial4-buffer/",relativePath:"beginner/tutorial4-buffer/README.md",key:"v-64577bce",path:"/beginner/tutorial4-buffer/",headers:[{level:2,title:"We're finally talking about them!",slug:"we-re-finally-talking-about-them"},{level:2,title:"What is a buffer?",slug:"what-is-a-buffer"},{level:2,title:"The vertex buffer",slug:"the-vertex-buffer"},{level:2,title:"So what do I do with it?",slug:"so-what-do-i-do-with-it"},{level:2,title:"The index buffer",slug:"the-index-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/19/2021, 2:38:15 AM"},{title:"Textures and bind groups",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T20:38:27.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Textures and bind groups"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:title",content:"Textures and bind groups"},{name:"twitter:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial5-textures/",relativePath:"beginner/tutorial5-textures/README.md",key:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",headers:[{level:2,title:"Loading an image from a file",slug:"loading-an-image-from-a-file"},{level:2,title:"Getting data into a Texture",slug:"getting-data-into-a-texture"},{level:2,title:"TextureViews and Samplers",slug:"textureviews-and-samplers"},{level:2,title:"The BindGroup",slug:"the-bindgroup"},{level:2,title:"PipelineLayout",slug:"pipelinelayout"},{level:2,title:"A change to the VERTICES",slug:"a-change-to-the-vertices"},{level:2,title:"Shader time",slug:"shader-time"},{level:2,title:"The results",slug:"the-results"},{level:2,title:"Cleaning things up",slug:"cleaning-things-up"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/24/2021, 8:38:27 PM"},{title:"Uniform buffers and a 3d camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-20T23:53:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Uniform buffers and a 3d camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:title",content:"Uniform buffers and a 3d camera"},{name:"twitter:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial6-uniforms/",relativePath:"beginner/tutorial6-uniforms/README.md",key:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",headers:[{level:2,title:"A perspective camera",slug:"a-perspective-camera"},{level:2,title:"The uniform buffer",slug:"the-uniform-buffer"},{level:2,title:"Uniform buffers and bind groups",slug:"uniform-buffers-and-bind-groups"},{level:2,title:"Using the uniforms in the vertex shader",slug:"using-the-uniforms-in-the-vertex-shader"},{level:2,title:"A controller for our camera",slug:"a-controller-for-our-camera"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/20/2021, 11:53:47 PM"},{title:"Instancing",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-20T23:53:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Instancing"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:title",content:"Instancing"},{name:"twitter:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial7-instancing/",relativePath:"beginner/tutorial7-instancing/README.md",key:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",headers:[{level:2,title:"The Instance Buffer",slug:"the-instance-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/20/2021, 11:53:47 PM"},{title:"The Depth Buffer",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Depth Buffer"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:title",content:"The Depth Buffer"},{name:"twitter:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial8-depth/",relativePath:"beginner/tutorial8-depth/README.md",key:"v-68f30830",path:"/beginner/tutorial8-depth/",headers:[{level:2,title:"Sorting from back to front",slug:"sorting-from-back-to-front"},{level:2,title:"A pixels depth",slug:"a-pixels-depth"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"Model Loading",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-20T23:53:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Model Loading"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial9-models/"},{name:"twitter:title",content:"Model Loading"},{name:"twitter:url",content:"/beginner/tutorial9-models/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial9-models/",relativePath:"beginner/tutorial9-models/README.md",key:"v-b07002f8",path:"/beginner/tutorial9-models/",headers:[{level:2,title:"Accessing files in the res folder",slug:"accessing-files-in-the-res-folder"},{level:2,title:"Loading models with TOBJ",slug:"loading-models-with-tobj"},{level:2,title:"Rendering a mesh",slug:"rendering-a-mesh"},{level:2,title:"Using the correct textures",slug:"using-the-correct-textures"},{level:2,title:"Rendering the entire model",slug:"rendering-the-entire-model"}],lastUpdated:"5/20/2021, 11:53:47 PM"},{title:"Working with Lights",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Working with Lights"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:title",content:"Working with Lights"},{name:"twitter:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial10-lighting/",relativePath:"intermediate/tutorial10-lighting/README.md",key:"v-a06af470",path:"/intermediate/tutorial10-lighting/",headers:[{level:2,title:"Ray/Path Tracing",slug:"ray-path-tracing"},{level:2,title:"The Blinn-Phong Model",slug:"the-blinn-phong-model"},{level:2,title:"Seeing the light",slug:"seeing-the-light"},{level:2,title:"Ambient Lighting",slug:"ambient-lighting"},{level:2,title:"Diffuse Lighting",slug:"diffuse-lighting"},{level:2,title:"The normal matrix",slug:"the-normal-matrix"},{level:2,title:"Specular Lighting",slug:"specular-lighting"},{level:2,title:"The half direction",slug:"the-half-direction"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"Normal Mapping",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Normal Mapping"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:title",content:"Normal Mapping"},{name:"twitter:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial11-normals/",relativePath:"intermediate/tutorial11-normals/README.md",key:"v-27757210",path:"/intermediate/tutorial11-normals/",headers:[{level:2,title:"Tangent Space to World Space",slug:"tangent-space-to-world-space"},{level:2,title:"The tangent, and the bitangent",slug:"the-tangent-and-the-bitangent"},{level:2,title:"World Space to Tangent Space",slug:"world-space-to-tangent-space"},{level:2,title:"Srgb and normal textures",slug:"srgb-and-normal-textures"},{level:2,title:"Unrelated stuff",slug:"unrelated-stuff"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"A Better Camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-04-19T01:36:12.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"A Better Camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:title",content:"A Better Camera"},{name:"twitter:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial12-camera/",relativePath:"intermediate/tutorial12-camera/README.md",key:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",headers:[{level:2,title:"The Camera",slug:"the-camera"},{level:2,title:"The Projection",slug:"the-projection"},{level:2,title:"Cleaning up main.rs",slug:"cleaning-up-main-rs"}],lastUpdated:"4/19/2021, 1:36:12 AM"},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Multi-threading with Wgpu and Rayon"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:title",content:"Multi-threading with Wgpu and Rayon"},{name:"twitter:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial13-threading/",relativePath:"intermediate/tutorial13-threading/README.md",key:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",headers:[{level:2,title:"Parallelizing loading models and textures",slug:"parallelizing-loading-models-and-textures"},{level:2,title:"It's that easy!",slug:"it-s-that-easy"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"News",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"News"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/"},{name:"twitter:title",content:"News"},{name:"twitter:url",content:"/news/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/",relativePath:"news/README.md",key:"v-70e651e8",path:"/news/",headers:[{level:2,title:"0.8 and WGSL",slug:"_0-8-and-wgsl"},{level:3,title:"The GLSL shaders have been translated to WGSL",slug:"the-glsl-shaders-have-been-translated-to-wgsl"},{level:3,title:"Shaderc has been removed",slug:"shaderc-has-been-removed"},{level:3,title:"Some of the showcase examples are broken",slug:"some-of-the-showcase-examples-are-broken"},{level:3,title:"Various API changes",slug:"various-api-changes"},{level:2,title:"0.7",slug:"_0-7"},{level:2,title:"November 2020 Cleanup, Content Freeze, and Patreon",slug:"november-2020-cleanup-content-freeze-and-patreon"},{level:2,title:"0.6",slug:"_0-6"},{level:2,title:"Added Pong Showcase",slug:"added-pong-showcase"},{level:2,title:"Normal mapping",slug:"normal-mapping"},{level:2,title:"0.5!",slug:"_0-5"},{level:2,title:"Reworked lighting tutorial",slug:"reworked-lighting-tutorial"},{level:2,title:"Added GIF showcase",slug:"added-gif-showcase"},{level:2,title:"Updated texture tutorials",slug:"updated-texture-tutorials"},{level:2,title:"Fixed panics do to not specifying the correct usage",slug:"fixed-panics-do-to-not-specifying-the-correct-usage"},{level:2,title:"Updating Winit from 0.20.0-alpha5 to 0.20",slug:"updating-winit-from-0-20-0-alpha5-to-0-20"},{level:2,title:"Changed tutorial examples to use a src directory",slug:"changed-tutorial-examples-to-use-a-src-directory"},{level:2,title:"Updating to 0.4 from 0.3",slug:"updating-to-0-4-from-0-3"},{level:2,title:"New/Recent Articles",slug:"new-recent-articles"}],lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Foreward",frontmatter:{meta:[{property:"article:modified_time",content:"2020-09-28T04:53:31.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Foreward"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/"},{name:"twitter:title",content:"Foreward"},{name:"twitter:url",content:"/showcase/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-45ee3628",path:"/showcase/",lastUpdated:"9/28/2020, 4:53:31 AM"},{title:"Memory Layout in GLSL",frontmatter:{meta:[{property:"article:modified_time",content:"2020-11-21T20:16:07.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Memory Layout in GLSL"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/alignment/"},{name:"twitter:title",content:"Memory Layout in GLSL"},{name:"twitter:url",content:"/showcase/alignment/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/alignment/",relativePath:"showcase/alignment/README.md",key:"v-a42e43b0",path:"/showcase/alignment/",headers:[{level:2,title:"Alignments",slug:"alignments"},{level:2,title:"In WGPU",slug:"in-wgpu"},{level:2,title:"std140 (since GLSL 1.4, OpenGL 3.1)",slug:"std140-since-glsl-1-4-opengl-3-1"},{level:3,title:"crates to make your struct compatible with std140",slug:"crates-to-make-your-struct-compatible-with-std140"},{level:2,title:"std430 (since GLSL 4.3, OpenGL 4.3)",slug:"std430-since-glsl-4-3-opengl-4-3"},{level:3,title:"crates to make yuor struct compatible with std430",slug:"crates-to-make-yuor-struct-compatible-with-std430"}],lastUpdated:"11/21/2020, 8:16:07 PM"},{title:"Compute Example: Tangents and Bitangents",frontmatter:{meta:[{property:"article:modified_time",content:"2021-02-12T06:29:40.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Compute Example: Tangents and Bitangents"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/compute/"},{name:"twitter:title",content:"Compute Example: Tangents and Bitangents"},{name:"twitter:url",content:"/showcase/compute/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/compute/",relativePath:"showcase/compute/README.md",key:"v-22582db0",path:"/showcase/compute/",headers:[{level:2,title:"Possible Improvements",slug:"possible-improvements"},{level:2,title:"Results",slug:"results"}],lastUpdated:"2/12/2021, 6:29:40 AM"},{title:"Creating gifs",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Creating gifs"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/gifs/"},{name:"twitter:title",content:"Creating gifs"},{name:"twitter:url",content:"/showcase/gifs/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/gifs/",relativePath:"showcase/gifs/README.md",key:"v-39635cd4",path:"/showcase/gifs/",headers:[{level:2,title:"How are we making the GIF?",slug:"how-are-we-making-the-gif"},{level:2,title:"How do we make the frames?",slug:"how-do-we-make-the-frames"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"Basic Imgui Demo",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Basic Imgui Demo"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/imgui-demo/"},{name:"twitter:title",content:"Basic Imgui Demo"},{name:"twitter:url",content:"/showcase/imgui-demo/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-7ded8e00",path:"/showcase/imgui-demo/",lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Pong",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Pong"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/pong/"},{name:"twitter:title",content:"Pong"},{name:"twitter:url",content:"/showcase/pong/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/pong/",relativePath:"showcase/pong/README.md",key:"v-06f2dc82",path:"/showcase/pong/",headers:[{level:2,title:"The Architecture",slug:"the-architecture"},{level:2,title:"Input",slug:"input"},{level:2,title:"Render",slug:"render"},{level:2,title:"Sound",slug:"sound"},{level:2,title:"Summary",slug:"summary"}],lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Wgpu without a window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-01T21:55:26.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Wgpu without a window"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/windowless/"},{name:"twitter:title",content:"Wgpu without a window"},{name:"twitter:url",content:"/showcase/windowless/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/windowless/",relativePath:"showcase/windowless/README.md",key:"v-9fe692c0",path:"/showcase/windowless/",headers:[{level:2,title:"So what do we need to do?",slug:"so-what-do-we-need-to-do"},{level:2,title:"A triangle without a window",slug:"a-triangle-without-a-window"},{level:2,title:"Getting data out of a buffer",slug:"getting-data-out-of-a-buffer"},{level:2,title:"Main is not asyncable",slug:"main-is-not-asyncable"}],lastUpdated:"5/1/2021, 9:55:26 PM"},{title:"Coming Soon!",frontmatter:{meta:[{property:"article:modified_time",content:"2020-09-28T04:53:31.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Coming Soon!"},{property:"og:type",content:"website"},{property:"og:url",content:"/todo.html"},{name:"twitter:title",content:"Coming Soon!"},{name:"twitter:url",content:"/todo.html"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/todo.html",relativePath:"todo.md",key:"v-b2ccea3a",path:"/todo.html",lastUpdated:"9/28/2020, 4:53:31 AM"}],themeConfig:{author:{name:"Benjamin R Hansen",twitter:"https://twitter.com/sotrh760"},displayAllHeaders:!1,lastUpdated:"Last Updated",sidebar:["/",{title:"Beginner",collapsable:!1,children:["/beginner/tutorial1-window/","/beginner/tutorial2-swapchain/","/beginner/tutorial3-pipeline/","/beginner/tutorial4-buffer/","/beginner/tutorial5-textures/","/beginner/tutorial6-uniforms/","/beginner/tutorial7-instancing/","/beginner/tutorial8-depth/","/beginner/tutorial9-models/"]},{title:"Intermediate",collapsable:!1,children:["/intermediate/tutorial10-lighting/","/intermediate/tutorial11-normals/","/intermediate/tutorial12-camera/","/intermediate/tutorial13-threading/"]},{title:"Showcase",collapsable:!0,children:["/showcase/","/showcase/windowless/","/showcase/gifs/","/showcase/pong/","/showcase/compute/","/showcase/alignment/","/showcase/imgui-demo/"]},"/news/"]}};n(147);Ro.component("AutoGithubLink",(function(){return n.e(22).then(n.bind(null,251))})),Ro.component("RecentArticles",(function(){return n.e(9).then(n.bind(null,252))})),Ro.component("Badge",(function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,276))}));n(148),n(149);var is={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:function(){return{scrollTop:null}},computed:{show:function(){return this.scrollTop>this.threshold}},mounted:function(){var t=this;this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Va()((function(){t.scrollTop=t.getScrollTop()}),100))},methods:{getScrollTop:function(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},as=(n(150),Object(Ja.a)(is,(function(){var t=this.$createElement,e=this._self._c||t;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5fd4ef0c",null).exports),ss=[{},function(t){t.Vue.mixin({computed:{$dataBlock:function(){return this.$options.__data__block__}}})},{},{},function(t){t.Vue.component("CodeCopy",Qa)},function(t){t.Vue.component("BackToTop",as)}],cs=["BackToTop"];n(114);function us(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function ls(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function fs(t,e,n){return e&&ls(t.prototype,e),n&&ls(t,n),t}function ps(t,e){return(ps=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function ds(t){return(ds=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function hs(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function vs(t,e){return!e||"object"!==ba(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var ms=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&ps(t,e)}(r,t);var e,n=(e=r,function(){var t,n=ds(e);if(hs()){var r=ds(this).constructor;t=Reflect.construct(n,arguments,r)}else t=n.apply(this,arguments);return vs(this,t)});function r(){return us(this,r),n.apply(this,arguments)}return r}(function(){function t(){us(this,t),this.store=new Ro({data:{state:{}}})}return fs(t,[{key:"$get",value:function(t){return this.store.state[t]}},{key:"$set",value:function(t,e){Ro.set(this.store.state,t,e)}},{key:"$emit",value:function(){var t;(t=this.store).$emit.apply(t,arguments)}},{key:"$on",value:function(){var t;(t=this.store).$on.apply(t,arguments)}}]),t}());Object.assign(ms.prototype,{getPageAsyncComponent:Ia,getLayoutAsyncComponent:Ma,getAsyncComponent:Da,getVueComponent:Na});var gs={install:function(t){var e=new ms;t.$vuepress=e,t.prototype.$vuepress=e}};function ys(t){t.beforeEach((function(e,n,r){if(bs(t,e.path))r();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){var o=e.path.replace(/\/$/,"")+".html";bs(t,o)?r(o):r()}else r();else{var i=e.path+"/",a=e.path+".html";bs(t,a)?r(a):bs(t,i)?r(i):r()}}))}function bs(t,e){return t.options.routes.filter((function(t){return t.path.toLowerCase()===e.toLowerCase()})).length>0}var ws={props:{pageKey:String,slotKey:{type:String,default:"default"}},render:function(t){var e=this.pageKey||this.$parent.$page.key;return Ba("pageKey",e),Ro.component(e)||Ro.component(e,Ia(e)),Ro.component(e)?t(e):t("")}},_s={functional:!0,props:{slotKey:String,required:!0},render:function(t,e){var n=e.props,r=e.slots;return t("div",{class:["content__".concat(n.slotKey)]},r()[n.slotKey])}},xs=(n(151),Object(Ja.a)({},(function(t,e){var n=e._c;return n("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[n("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),e._v(" "),n("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])}),[],!0,null,null,null).exports);function Ss(){return(Ss=o(regeneratorRuntime.mark((function t(e){var n,r,o,i;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:os.routerBase||os.base,ys(r=new ga({base:n,mode:"history",fallback:!1,routes:rs,scrollBehavior:function(t,e,n){return n||(t.hash?!Ro.$vuepress.$get("disableScrollBehavior")&&{selector:t.hash}:{x:0,y:0})}})),o={},t.prev=4,t.next=7,Promise.all(ss.filter((function(t){return"function"==typeof t})).map((function(t){return t({Vue:Ro,options:o,router:r,siteData:os,isServer:e})})));case 7:t.next=12;break;case 9:t.prev=9,t.t0=t.catch(4),console.error(t.t0);case 12:return i=new Ro(Object.assign(o,{router:r,render:function(t){return t("div",{attrs:{id:"app"}},[t("RouterView",{ref:"layout"}),t("div",{class:"global-ui"},cs.map((function(e){return t(e)})))])}})),t.abrupt("return",{app:i,router:r});case 14:case"end":return t.stop()}}),t,null,[[4,9]])})))).apply(this,arguments)}Ro.config.productionTip=!1,Ro.use(ga),Ro.use(gs),Ro.mixin(function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Ro;ya(e),n.$vuepress.$set("siteData",e);var r=t(n.$vuepress.$get("siteData")),o=new r,i=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(i).reduce((function(t,e){return e.startsWith("$")&&(t[e]=i[e].get),t}),a),{computed:a}}((function(t){return function(){function e(){us(this,e)}return fs(e,[{key:"setPage",value:function(t){this.__page=t}},{key:"$site",get:function(){return t}},{key:"$themeConfig",get:function(){return this.$site.themeConfig}},{key:"$frontmatter",get:function(){return this.$page.frontmatter}},{key:"$localeConfig",get:function(){var t,e,n=this.$site.locales,r=void 0===n?{}:n;for(var o in r)"/"===o?e=r[o]:0===this.$page.path.indexOf(o)&&(t=r[o]);return t||e||{}}},{key:"$siteTitle",get:function(){return this.$localeConfig.title||this.$site.title||""}},{key:"$title",get:function(){var t=this.$page,e=this.$page.frontmatter.metaTitle;if("string"==typeof e)return e;var n=this.$siteTitle,r=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?r?r+" | "+n:n:r||"VuePress"}},{key:"$description",get:function(){var t=function(t){if(t){var e=t.filter((function(t){return"description"===t.name}))[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}},{key:"$lang",get:function(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}},{key:"$localePath",get:function(){return this.$localeConfig.path||"/"}},{key:"$themeLocaleConfig",get:function(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}},{key:"$page",get:function(){return this.__page?this.__page:function(t,e){for(var n=0;n<t.length;n++){var r=t[n];if(r.path.toLowerCase()===e.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}}]),e}()}),os)),Ro.component("Content",ws),Ro.component("ContentSlotsDistributor",_s),Ro.component("OutboundLink",xs),Ro.component("ClientOnly",{functional:!0,render:function(t,e){var n=e.parent,r=e.children;if(n._isMounted)return r;n.$once("hook:mounted",(function(){n.$forceUpdate()}))}}),Ro.component("Layout",Ma("Layout")),Ro.component("NotFound",Ma("NotFound")),Ro.prototype.$withBase=function(t){var e=this.$site.base;return"/"===t.charAt(0)?e+t.slice(1):t},window.__VUEPRESS__={version:"1.4.0",hash:"2dd8d7b"},function(t){return Ss.apply(this,arguments)}(!1).then((function(t){var e=t.app;t.router.onReady((function(){e.$mount("#app")}))}))}]);
\ No newline at end of file
diff --git a/beginner/tutorial1-window/index.html b/beginner/tutorial1-window/index.html
index 22f399c2..0bd7db8f 100644
--- a/beginner/tutorial1-window/index.html
+++ b/beginner/tutorial1-window/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-01T21:55:26.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Dependencies and the window"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial1-window/"><meta name="twitter:title" content="Dependencies and the window"><meta name="twitter:url" content="/beginner/tutorial1-window/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.6d8e4b74.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.6d8e4b74.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -67,6 +67,6 @@ Vulkan validation layers output.</p> <p>To enable the Vulkan backend, add this n
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/25.6d8e4b74.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/25.6d8e4b74.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial2-swapchain/index.html b/beginner/tutorial2-swapchain/index.html
index cdcf6a61..a57bc81d 100644
--- a/beginner/tutorial2-swapchain/index.html
+++ b/beginner/tutorial2-swapchain/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-01T21:55:26.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Swapchain"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial2-swapchain/"><meta name="twitter:title" content="The Swapchain"><meta name="twitter:url" content="/beginner/tutorial2-swapchain/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/11.49298413.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/11.49298413.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -246,6 +246,6 @@ event_loop<span class="token punctuation">.</span><span class="token function">r
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/11.49298413.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/11.49298413.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html
index f7415c1b..98c485ea 100644
--- a/beginner/tutorial3-pipeline/index.html
+++ b/beginner/tutorial3-pipeline/index.html
@@ -7,8 +7,8 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2021-05-19T02:28:08.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Pipeline"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial3-pipeline/"><meta name="twitter:title" content="The Pipeline"><meta name="twitter:url" content="/beginner/tutorial3-pipeline/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/12.2c105f9d.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <meta property="article:modified_time" content="2021-05-24T20:23:53.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Pipeline"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial3-pipeline/"><meta name="twitter:title" content="The Pipeline"><meta name="twitter:url" content="/beginner/tutorial3-pipeline/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/12.2c18a516.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -81,7 +81,7 @@ fn main(in: VertexOutput) -&gt; [[location(0)]] vec4&lt;f32&gt; {
         <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     <span class="token comment">// continued ...</span>
-</code></pre></div><p>Two things to note here:</p> <ol><li>Here you can specify which function inside of the shader should be called, which is known as the <code>entry_point</code>. These are the functions we marked with <code>[[stage(vertex)]]</code> and <code>[[stage(fragment)]]</code></li> <li>The <code>buffers</code> field tells <code>wgpu</code> 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.</li> <li>The <code>fragment_stage</code> is technically optional, so you have to wrap it in <code>Some()</code>. We need it if we want to store color data to the <code>swap_chain</code>.</li> <li>The <code>targets</code> field tells <code>wgpu</code> what color outputs it should set up.Currently we only need one for the <code>swap_chain</code>. We use the <code>swap_chain</code>'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 <code>wgpu</code> to write to all colors: red, blue, green, and alpha. <em>We'll talk more about</em><code>color_state</code> <em>when we talk about textures.</em></li></ol> <div class="language-rust extra-class"><pre class="language-rust"><code>    primitive<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">PrimitiveState</span> <span class="token punctuation">{</span>
+</code></pre></div><p>Two things to note here:</p> <ol><li>Here you can specify which function inside of the shader should be called, which is known as the <code>entry_point</code>. These are the functions we marked with <code>[[stage(vertex)]]</code> and <code>[[stage(fragment)]]</code></li> <li>The <code>buffers</code> field tells <code>wgpu</code> 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.</li> <li>The <code>fragment</code> is technically optional, so you have to wrap it in <code>Some()</code>. We need it if we want to store color data to the <code>swap_chain</code>.</li> <li>The <code>targets</code> field tells <code>wgpu</code> what color outputs it should set up.Currently we only need one for the <code>swap_chain</code>. We use the <code>swap_chain</code>'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 <code>wgpu</code> to write to all colors: red, blue, green, and alpha. <em>We'll talk more about</em><code>color_state</code> <em>when we talk about textures.</em></li></ol> <div class="language-rust extra-class"><pre class="language-rust"><code>    primitive<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">PrimitiveState</span> <span class="token punctuation">{</span>
         topology<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">PrimitiveTopology</span><span class="token punctuation">::</span><span class="token class-name">TriangleList</span><span class="token punctuation">,</span> <span class="token comment">// 1.</span>
         strip_index_format<span class="token punctuation">:</span> <span class="token class-name">None</span><span class="token punctuation">,</span>
         front_face<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">FrontFace</span><span class="token punctuation">::</span><span class="token class-name">Ccw</span><span class="token punctuation">,</span> <span class="token comment">// 2.</span>
@@ -141,7 +141,7 @@ fn main(in: VertexOutput) -&gt; [[location(0)]] vec4&lt;f32&gt; {
     render_pass<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">..</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">..</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3.</span>
 <span class="token punctuation">}</span>
 <span class="token comment">// ...</span>
-</code></pre></div><p>We didn't change much, but let's talk about what we did change.</p> <ol><li>We renamed <code>_render_pass</code> to <code>render_pass</code> and made it mutable.</li> <li>We set the pipeline on the <code>render_pass</code> using the one we just created.</li> <li>We tell <code>wgpu</code> to draw <em>something</em> with 3 vertices, and 1 instance. This is where <code>[[builtin(vertex_index)]]</code> comes from.</li></ol> <p>With all that you should be seeing a lovely brown triangle.</p> <p><img src="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/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==" alt="Said lovely brown triangle"></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>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. <em>Hint: you'll need to modify</em> <code>VertexOutput</code></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial3-pipeline/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">5/19/2021, 2:28:08 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>We didn't change much, but let's talk about what we did change.</p> <ol><li>We renamed <code>_render_pass</code> to <code>render_pass</code> and made it mutable.</li> <li>We set the pipeline on the <code>render_pass</code> using the one we just created.</li> <li>We tell <code>wgpu</code> to draw <em>something</em> with 3 vertices, and 1 instance. This is where <code>[[builtin(vertex_index)]]</code> comes from.</li></ol> <p>With all that you should be seeing a lovely brown triangle.</p> <p><img src="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/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==" alt="Said lovely brown triangle"></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>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. <em>Hint: you'll need to modify</em> <code>VertexOutput</code></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial3-pipeline/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">5/24/2021, 8:23:53 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial2-swapchain/" class="prev">
           The Swapchain
@@ -150,6 +150,6 @@ fn main(in: VertexOutput) -&gt; [[location(0)]] vec4&lt;f32&gt; {
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/12.2c105f9d.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/12.2c18a516.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial4-buffer/index.html b/beginner/tutorial4-buffer/index.html
index f43f9ce9..ed83d178 100644
--- a/beginner/tutorial4-buffer/index.html
+++ b/beginner/tutorial4-buffer/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-19T02:38:15.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Buffers and Indices"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial4-buffer/"><meta name="twitter:title" content="Buffers and Indices"><meta name="twitter:url" content="/beginner/tutorial4-buffer/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/6.c24f582f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/6.c24f582f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -260,6 +260,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/6.c24f582f.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/6.c24f582f.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html
index a65cce44..cd1d7122 100644
--- a/beginner/tutorial5-textures/index.html
+++ b/beginner/tutorial5-textures/index.html
@@ -7,8 +7,8 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2021-05-19T02:38:15.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Textures and bind groups"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial5-textures/"><meta name="twitter:title" content="Textures and bind groups"><meta name="twitter:url" content="/beginner/tutorial5-textures/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.f132d94f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <meta property="article:modified_time" content="2021-05-24T20:38:27.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Textures and bind groups"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial5-textures/"><meta name="twitter:title" content="Textures and bind groups"><meta name="twitter:url" content="/beginner/tutorial5-textures/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.eb0df1ad.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -141,7 +141,7 @@ queue<span class="token punctuation">.</span><span class="token function">submit
         label<span class="token punctuation">:</span> <span class="token class-name">Some</span><span class="token punctuation">(</span><span class="token string">&quot;diffuse_bind_group&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>Looking at this you might get a bit of déjà vu! That's because a <code>BindGroup</code> is a more specific declaration of the <code>BindGroupLayout</code>. The reason why they're separate is it allows us to swap out <code>BindGroup</code>s on the fly, so long as they all share the same <code>BindGroupLayout</code>. For each texture and sampler we create, we need to create its own <code>BindGroup</code>.</p> <p>Now that we have our <code>diffuse_bind_group</code>, let's add it to our <code>State</code> struct:</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">struct</span> <span class="token type-definition class-name">State</span> <span class="token punctuation">{</span>
+</code></pre></div><p>Looking at this you might get a bit of déjà vu! That's because a <code>BindGroup</code> is a more specific declaration of the <code>BindGroupLayout</code>. The reason why they're separate is it allows us to swap out <code>BindGroup</code>s on the fly, so long as they all share the same <code>BindGroupLayout</code>. Each texture and sampler we create will need to be added to a <code>BindGroup</code>. For our purposes, we'll create a new bind group for each texture.</p> <p>Now that we have our <code>diffuse_bind_group</code>, let's add it to our <code>State</code> struct:</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">struct</span> <span class="token type-definition class-name">State</span> <span class="token punctuation">{</span>
     surface<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">Surface</span><span class="token punctuation">,</span>
     device<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">Device</span><span class="token punctuation">,</span>
     queue<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">Queue</span><span class="token punctuation">,</span>
@@ -392,7 +392,7 @@ fn <span class="token function">main</span><span class="token punctuation">(</sp
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
-</code></pre></div><p>Phew!</p> <p>With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Create another texture and swap it out when you press the space key.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial5-textures/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">5/19/2021, 2:38:15 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>Phew!</p> <p>With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Create another texture and swap it out when you press the space key.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial5-textures/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">5/24/2021, 8:38:27 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial4-buffer/" class="prev">
           Buffers and Indices
@@ -401,6 +401,6 @@ fn <span class="token function">main</span><span class="token punctuation">(</sp
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/5.f132d94f.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/5.eb0df1ad.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html
index 25de1173..b8951484 100644
--- a/beginner/tutorial6-uniforms/index.html
+++ b/beginner/tutorial6-uniforms/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-20T23:53:47.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Uniform buffers and a 3d camera"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial6-uniforms/"><meta name="twitter:title" content="Uniform buffers and a 3d camera"><meta name="twitter:url" content="/beginner/tutorial6-uniforms/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/15.1153a1ff.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/15.1153a1ff.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -328,6 +328,6 @@ fn main(
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/15.1153a1ff.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/15.1153a1ff.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html
index f090afc9..489bf254 100644
--- a/beginner/tutorial7-instancing/index.html
+++ b/beginner/tutorial7-instancing/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-20T23:53:47.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Instancing"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial7-instancing/"><meta name="twitter:title" content="Instancing"><meta name="twitter:url" content="/beginner/tutorial7-instancing/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/16.251e2e26.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/16.251e2e26.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -181,6 +181,6 @@ fn main(
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/16.251e2e26.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/16.251e2e26.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html
index 772b826f..ae644f2a 100644
--- a/beginner/tutorial8-depth/index.html
+++ b/beginner/tutorial8-depth/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-01T21:55:26.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Depth Buffer"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial8-depth/"><meta name="twitter:title" content="The Depth Buffer"><meta name="twitter:url" content="/beginner/tutorial8-depth/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/13.6e25613a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/13.6e25613a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -111,6 +111,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/13.6e25613a.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/13.6e25613a.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html
index 10635028..9fff8043 100644
--- a/beginner/tutorial9-models/index.html
+++ b/beginner/tutorial9-models/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-20T23:53:47.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Model Loading"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial9-models/"><meta name="twitter:title" content="Model Loading"><meta name="twitter:url" content="/beginner/tutorial9-models/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/8.999a7276.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/8.999a7276.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -363,6 +363,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/8.999a7276.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/8.999a7276.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index fe59ad90..f17f1e94 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-03-20T13:35:03.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Introduction"><meta property="og:type" content="website"><meta property="og:url" content="/"><meta name="twitter:title" content="Introduction"><meta name="twitter:url" content="/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/24.b71fce5a.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/24.b71fce5a.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -17,6 +17,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/24.b71fce5a.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/24.b71fce5a.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html
index ec973e52..86628074 100644
--- a/intermediate/tutorial10-lighting/index.html
+++ b/intermediate/tutorial10-lighting/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T17:44:10.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Working with Lights"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial10-lighting/"><meta name="twitter:title" content="Working with Lights"><meta name="twitter:url" content="/intermediate/tutorial10-lighting/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/3.04fce8d9.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/3.04fce8d9.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -636,6 +636,6 @@ let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32);
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/3.04fce8d9.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/3.04fce8d9.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html
index 7aa06f00..e902896d 100644
--- a/intermediate/tutorial11-normals/index.html
+++ b/intermediate/tutorial11-normals/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T17:44:10.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Normal Mapping"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial11-normals/"><meta name="twitter:title" content="Normal Mapping"><meta name="twitter:url" content="/intermediate/tutorial11-normals/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.e8a1e0e3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.e8a1e0e3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -463,6 +463,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/4.e8a1e0e3.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/4.e8a1e0e3.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html
index f8c4a81a..8fdb110e 100644
--- a/intermediate/tutorial12-camera/index.html
+++ b/intermediate/tutorial12-camera/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-04-19T01:36:12.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="A Better Camera"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial12-camera/"><meta name="twitter:title" content="A Better Camera"><meta name="twitter:url" content="/intermediate/tutorial12-camera/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.5de4d28c.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.5de4d28c.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -376,6 +376,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/14.5de4d28c.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/14.5de4d28c.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial13-threading/index.html b/intermediate/tutorial13-threading/index.html
index 8a634efc..2a979a5b 100644
--- a/intermediate/tutorial13-threading/index.html
+++ b/intermediate/tutorial13-threading/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T17:44:10.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Multi-threading with Wgpu and Rayon"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial13-threading/"><meta name="twitter:title" content="Multi-threading with Wgpu and Rayon"><meta name="twitter:url" content="/intermediate/tutorial13-threading/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.745a2634.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.745a2634.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -108,6 +108,6 @@ Elapsed (Threaded): 199.645027ms
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/26.745a2634.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/26.745a2634.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/news/index.html b/news/index.html
index 29aaaa57..b1c0ab56 100644
--- a/news/index.html
+++ b/news/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T19:14:17.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="News"><meta property="og:type" content="website"><meta property="og:url" content="/news/"><meta name="twitter:title" content="News"><meta name="twitter:url" content="/news/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.5924bde1.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/9.ecb6e79c.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.5924bde1.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/9.ecb6e79c.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -24,6 +24,6 @@
         <a href="/learn-wgpu/showcase/imgui-demo/" class="prev">
           Basic Imgui Demo
         </a></span> <!----></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/17.5924bde1.js" defer></script><script src="/learn-wgpu/assets/js/9.ecb6e79c.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/17.5924bde1.js" defer></script><script src="/learn-wgpu/assets/js/9.ecb6e79c.js" defer></script>
   </body>
 </html>
diff --git a/showcase/alignment/index.html b/showcase/alignment/index.html
index ed762079..05940828 100644
--- a/showcase/alignment/index.html
+++ b/showcase/alignment/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2020-11-21T20:16:07.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Memory Layout in GLSL"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/alignment/"><meta name="twitter:title" content="Memory Layout in GLSL"><meta name="twitter:url" content="/showcase/alignment/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.a3ac06e2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.a3ac06e2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -23,6 +23,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/28.a3ac06e2.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/28.a3ac06e2.js" defer></script>
   </body>
 </html>
diff --git a/showcase/compute/index.html b/showcase/compute/index.html
index f3b62ba0..05320e71 100644
--- a/showcase/compute/index.html
+++ b/showcase/compute/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-02-12T06:29:40.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Compute Example: Tangents and Bitangents"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/compute/"><meta name="twitter:title" content="Compute Example: Tangents and Bitangents"><meta name="twitter:url" content="/showcase/compute/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/7.88810c81.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/7.88810c81.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -122,6 +122,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/7.88810c81.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/7.88810c81.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html
index d56d47f0..d2469685 100644
--- a/showcase/gifs/index.html
+++ b/showcase/gifs/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-01T21:55:26.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Creating gifs"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/gifs/"><meta name="twitter:title" content="Creating gifs"><meta name="twitter:url" content="/showcase/gifs/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/18.a965e3f2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/18.a965e3f2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -149,6 +149,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/18.a965e3f2.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/18.a965e3f2.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/showcase/imgui-demo/index.html b/showcase/imgui-demo/index.html
index 7f213580..b591bbcd 100644
--- a/showcase/imgui-demo/index.html
+++ b/showcase/imgui-demo/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T19:14:17.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Basic Imgui Demo"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/imgui-demo/"><meta name="twitter:title" content="Basic Imgui Demo"><meta name="twitter:url" content="/showcase/imgui-demo/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/19.bee0cfc3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/19.bee0cfc3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -115,6 +115,6 @@ display<span class="token punctuation">.</span>queue<span class="token punctuati
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/19.bee0cfc3.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/19.bee0cfc3.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index 2254cf5c..581f7017 100644
--- a/showcase/index.html
+++ b/showcase/index.html
@@ -7,12 +7,12 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2020-09-25T21:57:57.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Foreward"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/"><meta name="twitter:title" content="Foreward"><meta name="twitter:url" content="/showcase/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/27.04f788d9.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <meta property="article:modified_time" content="2020-09-28T04:53:31.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Foreward"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/"><meta name="twitter:title" content="Foreward"><meta name="twitter:url" content="/showcase/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/27.04f788d9.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
-    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/learn-wgpu/" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-swapchain/" class="sidebar-link">The Swapchain</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li><li><a href="/learn-wgpu/intermediate/tutorial13-threading/" class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Showcase</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/showcase/" class="active sidebar-link">Foreward</a></li><li><a href="/learn-wgpu/showcase/windowless/" class="sidebar-link">Wgpu without a window</a></li><li><a href="/learn-wgpu/showcase/gifs/" class="sidebar-link">Creating gifs</a></li><li><a href="/learn-wgpu/showcase/pong/" class="sidebar-link">Pong</a></li><li><a href="/learn-wgpu/showcase/compute/" class="sidebar-link">Compute Example: Tangents and Bitangents</a></li><li><a href="/learn-wgpu/showcase/alignment/" class="sidebar-link">Memory Layout in GLSL</a></li><li><a href="/learn-wgpu/showcase/imgui-demo/" class="sidebar-link">Basic Imgui Demo</a></li></ul></section></li><li><a href="/learn-wgpu/news/" class="sidebar-link">News</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="foreward"><a href="#foreward" class="header-anchor">#</a> Foreward</h1> <p>The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with <code>wgpu</code>. I won't go over specifics of creating <code>wgpu</code> resources, as those will be covered elsewhere. The code for these examples is still available however, and will be accessible on Github.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">9/25/2020, 9:57:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/learn-wgpu/" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-swapchain/" class="sidebar-link">The Swapchain</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li><li><a href="/learn-wgpu/intermediate/tutorial13-threading/" class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Showcase</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/showcase/" class="active sidebar-link">Foreward</a></li><li><a href="/learn-wgpu/showcase/windowless/" class="sidebar-link">Wgpu without a window</a></li><li><a href="/learn-wgpu/showcase/gifs/" class="sidebar-link">Creating gifs</a></li><li><a href="/learn-wgpu/showcase/pong/" class="sidebar-link">Pong</a></li><li><a href="/learn-wgpu/showcase/compute/" class="sidebar-link">Compute Example: Tangents and Bitangents</a></li><li><a href="/learn-wgpu/showcase/alignment/" class="sidebar-link">Memory Layout in GLSL</a></li><li><a href="/learn-wgpu/showcase/imgui-demo/" class="sidebar-link">Basic Imgui Demo</a></li></ul></section></li><li><a href="/learn-wgpu/news/" class="sidebar-link">News</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="foreward"><a href="#foreward" class="header-anchor">#</a> Foreward</h1> <p>The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with <code>wgpu</code>. I won't go over specifics of creating <code>wgpu</code> resources, as those will be covered elsewhere. The code for these examples is still available however, and will be accessible on Github.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">9/28/2020, 4:53:31 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/intermediate/tutorial13-threading/" class="prev">
           Multi-threading with Wgpu and Rayon
@@ -21,6 +21,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/27.04f788d9.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/27.04f788d9.js" defer></script>
   </body>
 </html>
diff --git a/showcase/pong/index.html b/showcase/pong/index.html
index ce84c2ac..b3808315 100644
--- a/showcase/pong/index.html
+++ b/showcase/pong/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T19:14:17.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Pong"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/pong/"><meta name="twitter:title" content="Pong"><meta name="twitter:url" content="/showcase/pong/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/20.17c44988.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/20.17c44988.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -205,6 +205,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/20.17c44988.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/20.17c44988.js" defer></script>
   </body>
 </html>
diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html
index af07cab2..c2b8ca53 100644
--- a/showcase/windowless/index.html
+++ b/showcase/windowless/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-01T21:55:26.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Wgpu without a window"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/windowless/"><meta name="twitter:title" content="Wgpu without a window"><meta name="twitter:url" content="/showcase/windowless/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/21.bc3bd057.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/21.bc3bd057.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
@@ -229,6 +229,6 @@ output_buffer<span class="token punctuation">.</span><span class="token function
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/21.bc3bd057.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/21.bc3bd057.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/todo.html b/todo.html
index 28b62cd8..3fa3c4f5 100644
--- a/todo.html
+++ b/todo.html
@@ -7,12 +7,12 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2020-09-25T21:57:57.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Coming Soon!"><meta property="og:type" content="website"><meta property="og:url" content="/todo.html"><meta name="twitter:title" content="Coming Soon!"><meta name="twitter:url" content="/todo.html"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.0804b831.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/29.281013fa.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c105f9d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.f132d94f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <meta property="article:modified_time" content="2020-09-28T04:53:31.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Coming Soon!"><meta property="og:type" content="website"><meta property="og:url" content="/todo.html"><meta name="twitter:title" content="Coming Soon!"><meta name="twitter:url" content="/todo.html"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9c6f1f55.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/29.281013fa.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.49298413.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.2c18a516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.6e25613a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.5de4d28c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.1153a1ff.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.251e2e26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.5924bde1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a965e3f2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.bc3bd057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.b71fce5a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.6d8e4b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.04fce8d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.e8a1e0e3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.eb0df1ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.c24f582f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.999a7276.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.cf4d7bcd.css">
   </head>
   <body>
-    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/learn-wgpu/" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-swapchain/" class="sidebar-link">The Swapchain</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li><li><a href="/learn-wgpu/intermediate/tutorial13-threading/" class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/learn-wgpu/news/" class="sidebar-link">News</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="coming-soon"><a href="#coming-soon" class="header-anchor">#</a> Coming Soon!</h1> <p>This section has not yet been completed.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">9/25/2020, 9:57:57 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.0804b831.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/29.281013fa.js" defer></script>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/learn-wgpu/" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-swapchain/" class="sidebar-link">The Swapchain</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li><li><a href="/learn-wgpu/intermediate/tutorial13-threading/" class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/learn-wgpu/news/" class="sidebar-link">News</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="coming-soon"><a href="#coming-soon" class="header-anchor">#</a> Coming Soon!</h1> <p>This section has not yet been completed.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">9/28/2020, 4:53:31 AM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
+    <script src="/learn-wgpu/assets/js/app.9c6f1f55.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/29.281013fa.js" defer></script>
   </body>
 </html>