diff --git a/47536c488428e6bdf63f.module.wasm b/139d0bf2a4368d53fa02.module.wasm
similarity index 99%
rename from 47536c488428e6bdf63f.module.wasm
rename to 139d0bf2a4368d53fa02.module.wasm
index ff6a476f..f4210e46 100644
Binary files a/47536c488428e6bdf63f.module.wasm and b/139d0bf2a4368d53fa02.module.wasm differ
diff --git a/assets/js/14.6c6630a3.js b/assets/js/14.1aaaa4a4.js
similarity index 84%
rename from assets/js/14.6c6630a3.js
rename to assets/js/14.1aaaa4a4.js
index dcc0a332..8a3be453 100644
--- a/assets/js/14.6c6630a3.js
+++ b/assets/js/14.1aaaa4a4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{208:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyIAAAJzCAYAAADz6Ke4AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AABcCSURBVHic7d19jF31nd/xz51HA8Y2NhiwHbCdiBCbDQ4LbBvW2W5CFnW7VdpUbVI1Uf+IEnX/zv7X/lO1Up/UqpXaqEkrRW2yD223u93dPmwIKCxqaBoIm7AECBiMEz/NGONnsD0z9/QPwIGACtj4Y0Jer79m7pzzm69mpHvue865Z0br1q0bhmHI5ORkbrnllmzZsiVXXHFFZmZmAgAAcC4WFhZy6NChXDu7K3//33w9p5aWMhqNMjUMQ1asWJFPfOIT2b59e7Zv357Z2dkLPS8AAPAOcezYsTzwwAP5zOLmfPWrX83Ro0czNTk5mU9+8pP5/Oc/nyQ5dOhQxuPxBR4VAAB4p5icnMz73//+3HzzzUmSL37xi5m6+eab85GPfCSj0ShHjx69wCMCAADvNEtLS1laWsqpU6dy6623Zv3apUxt2bIlN954Y44fP55hGC70jAAAwDvYddddl/vuuy9Ta9euzYoVK5wNAQAAzrupqamsXr06EzMzM1laWrrQ8wAAAD8jpqenM5W8cM2Wy7IAAIAWIQIAANRNJHFpFsBPo/He/O//8K/yL//9Xdl5+jzuc75nepWlPH3nF/LP/uk/z3956Ln4MxnAhTM3N5fvfe97r/j3HsMw5KGHHsq+ffvOaW1nRAB+Wg3JsLCYxdPjZBhnGEZntc9wck8e/tP9Wb71pmxa8QbWeKtneg0zsxNJRpmZnXB8AngDvva1ryVJ7rjjjrdszUOHDp2JkImJiWzdujXDMOThhx/Ovn37sn///szOzuayyy47q/WnkmQ8HnuiB/hpM7Exv/Z3/0n+2rCYo/PP5LnxG3gef9U+4xx//Fu5+75n84Frt2XjpRP9mV5lyGj0YsAMQzIMzooAvEFv5Wv6tWvXZvPmzdmxY0f27NmT0WiUpaWlM2dC3v3ud2ft2rU5ffrsToGfOSMCwIV2Ig/97r/Lnbsuyc9/8jP55fWjPPN/vpL/+M35DMu35a9/9vZcM3Eo9//Wl/Mnc1fkFz/1wRz+1/8tDy9szq/++l/Nlqmn8sf/9vfz+Ibb87ENu3Pv/TvyzKnprN78C/nor/x81s0mWXwkv/33fv/FfT6Wq5/6ev7HvU9ncTzOt3/zX+Tbo4vycx//O7lj02RvpiSn5/40X7/zW9lxcDGXbLgx29bMZpQTZ34yw/N78uA99+bBJ+dyYmk2qzZcn1/4pV/M+y4//ebm+9ufyp9bc45nfQB+RiwsLOTWW2/N1NRUHnvssezevfvM166//vrcdNNNOXjw4Fmv79IsgLeN5bluy/rc/fTuzM8dyXjdTObnDyXT05l8/kAOHBnnXcvmsv/gkInV1+d9a5flwYkko9nMjoYMmc3sRLLw1Dfye7suzbpr35XVP9qZAz/4k9x52fp8+rYrM/HiNi/tszhMZdlMMpyczdVbPpCNK5dlw+Wjlx0TCjMt7s43//s38tihIdOXrcvK5x/JN7/7XIZMJBkyjA/mO3/4e7ln9+ksW3NtNl50OD98+jv5n888l4lP/aU3N98VybDkeAe8M9x1112veg1/5513nvn4ox/96DmtPwxDDhw4kG3btmVubi6HDh1KkqxevTrbtm3LgQMHzml9IQLwtrGUi9ZvyuqJH2b/nv15/oZl2bt3nKtuuiUzDzyYffMns7Bsb/YsJBdvviarFhd+vOswnHkeH8YzueFv/UY+/XMzee7BL+cf/s4jOXzw2Zwa1mbZy5/rh4msu+Uv5qYnHsrTxy7Je7b/Wn712lFOHnk2x04PtZlm9u3IjiPjjNbcls98/uN5z8zRfOtL/yi/+/g4yZClfY/kz/acysTlfyGf+42/nGsmT+aR3/7H+fKDT+S7jx3Oe9/zJuZbGqJDgIa77rrr//v122+//bzP8Fa8vh+GIffee++ZCEmSZ599Nvfcc0+2bt3640tpz4JLswDeRsaXXZNNFyf3792fuQPLsvfkRdl03ZbMPHF/Hpo7kGdm9+S5TGfLxrUZZ89rLzKxPhtXH8refeOMZlflklFy9IW3WvyEIaeOHsqp4YWPF48fzIEDrz6gnO+ZFp4/nhPjUWY2bsrKZ/dkz3gyl2+8IhOPzyVJFo4dzpHxKNMb1mXZ/J7sHSay8pp1mfzO4zl4+FAW38x8/ugGvIN89rOfPfPxl770pSTJ5z73uTOPPfXUU+e0/jAM+f73v5/9+/cnSbZu3ZrxeJxHH330FY+dbYw4IwLwNjIsXp6NG6dz/6MHsn/XTJ4drc+fX70qsxsmc9/83uyaPphh4tpsump45Yvql519yMR0JsZLGUbJePGlbUav3ObMPq/47q8RK+d/pky8cAAbjU/n+aUhE1nI6aWXDmpDMvniG+jHp3NyPGQySzm58MJtJEcTU2c/H8B59PIgeC1PPvnkOX+P11rjrVj3JUeOHMn8/HyS5L3vfW9uuOGGJC+0w+OPP575+fls2LAhK1euPKv13TUL4O1kGOXKTRsy8f25PL1rNllzY9ZOJtPrrspo587snBpndOXmrJ8aZ1h82W4/ERXD0pBhIi+729Tw6m1evBvVaGKUDEtZWBhnGF7jrlnneabplZdl+WjI0R/tzN7T67J+6kT2/PBAxi8skpkrrsyaiUdzYPeu7Du9IeunT2b30/uyNJrI2itXZzTOG5/vx7fBBzivduzYcUG+71t916wPf/jD2bVr1yveE3LTTTdlPB5n48aNmZmZycmTJ89q/TNnRM7l+i4A3irjzKzblCtGO7N/3/OZ3XZVLh3Gydqrc/GJ+7N/SFZu3ZDlQ7L4+ou9AbNZtfrijIZj+d7/+k+ZWzGR1R/4eH753dO1mUZrt+b9a/5v7j34QP7wN3fnitkTOXBwMcmLx6U1H8j2676d//qDH399bv54cum2fPB9lyRLi+WfGcDbz0tnYN7KADp58mSWL1+em2++OXNzc2cen5+fzy233JITJ07k+PHjZ73+mRCZnJx8vW0BKFha/q5sXpHsPzzKuvVrMh4Pyaqrc/XEkB8sXZTN11yWxfHSq89uvMbnr7/NKOtv+yv54L4/yP0/eiZzuSqbVrz6nwiez5nGi2vyS5/+eI7/5z/On80dyekNH8ln7pjPV77ynWRIxqcm876/+ev5G3f+Ub7x3Z3Zd2Ima67bnl/52O25dunZHB/exHzn+LsBeLt64oknzsu6x44dy7Fjx171+EvvETkXoy984QvDhz70oUxPT7/+1gCcf6OLs3bThqyaGvL8/NP50eGFZGplNmy6MhePlnJs787sOz5ORpfkys3rs3LiePY/uTdHh5/4fJyMLlqbje9alann5rNz9+Es/uQ+42Q0fWnWXn1FLp2dTJZO5/D+H+aZ54beTEkmlq3KlVeuyfKZZOHEocwfn8nVV12ak3NPZc+RpWRyWVZdfnlWLb8o0xPjLDx/LM8eeCZHT43f3HwAvC3cfffdL4TIbbfdlmXLll3oeQAAgJ8Bd9999wuXZs3OznqzOgAAUDOVvLXvrgcAAHg9r3GfRgAAgPPLGREAAKBuKkn+wW9940LPAQAA/IzYvm7k0iwAAKBPiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAuqkk2b5udKHnAAAAfob8P4Fe1tYvSjndAAAAAElFTkSuQmCC"},209:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},316: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:"the-surface"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("h2",{attrs:{id:"first-some-housekeeping-state"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#first-some-housekeeping-state"}},[t._v("#")]),t._v(" First, some housekeeping: State")]),t._v(" "),n("p",[t._v("For convenience, we're going to pack all the fields into a struct and create some methods on that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),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("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token 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    config"),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("SurfaceConfiguration")]),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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Creating some of the wgpu types requires async code")]),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("(")]),t._v("window"),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 class-name"}},[t._v("Window")]),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 macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),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("mut")]),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(" new_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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),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("mut")]),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(" event"),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 class-name"}},[t._v("WindowEvent")]),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("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),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("mut")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),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("mut")]),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(" "),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 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("SurfaceError")]),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 macro property"}},[t._v("todo!")]),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("I'm glossing over "),n("code",[t._v("State")]),t._v("s fields, but they'll make more sense as I explain the code behind the methods.")]),t._v(" "),n("h2",{attrs:{id:"state-new"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#state-new"}},[t._v("#")]),t._v(" State::new()")]),t._v(" "),n("p",[t._v("The code for this is pretty straight forward, but let's break this down a bit.")]),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 comment"}},[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("(")]),t._v("window"),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 class-name"}},[t._v("Window")]),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 keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("inner_size")]),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 comment"}},[t._v("// The instance is a handle to our GPU")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Backends::all => Vulkan + Metal + DX12 + Browser WebGPU")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance "),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("Instance")]),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 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("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),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(" surface "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),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("RequestAdapterOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                power_preference"),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("PowerPreference")]),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(",")]),t._v("\n                compatible_surface"),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 operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                force_fallback_adapter"),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            "),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 keyword"}},[t._v("await")]),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("h3",{attrs:{id:"instance-and-adapter"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#instance-and-adapter"}},[t._v("#")]),t._v(" Instance and Adapter")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("instance")]),t._v(" is the first thing you create when using wgpu. Its main purpose\nis to create "),n("code",[t._v("Adapter")]),t._v("s and "),n("code",[t._v("Surface")]),t._v("s.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("adapter")]),t._v(" is a handle to our actual graphics card. You can use this to get information about the graphics card such as its name and what backend the adapter uses. We use this to create our "),n("code",[t._v("Device")]),t._v(" and "),n("code",[t._v("Queue")]),t._v(" later. Let's discuss the fields of "),n("code",[t._v("RequestAdapterOptions")]),t._v(".")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("power_preference")]),t._v(" has two variants: "),n("code",[t._v("LowPower")]),t._v(", and "),n("code",[t._v("HighPerformance")]),t._v(". This means will pick an adapter that favors battery life such as a integrated GPU when using "),n("code",[t._v("LowPower")]),t._v(". "),n("code",[t._v("HighPerformance")]),t._v(" as will pick an adapter for more power hungry yet more performant GPU's such as your dedicated graphics card. WGPU will favor "),n("code",[t._v("LowPower")]),t._v(" if there is no adapter for the "),n("code",[t._v("HighPerformance")]),t._v(" option.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("compatible_surface")]),t._v(" field tells wgpu to find an adapter that can present to the supplied surface.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("force_fallback_adapter")]),t._v(' forces wgpu to pick an adapter that will work on all harware. This usually means that the rendering backend will use a "software" system, instead of hardware such as a GPU.')])]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The options I've passed to "),n("code",[t._v("request_adapter")]),t._v(" aren't guaranteed to work for all devices, but will work for most of them. If wgpu can't find an adapter with the required permissions, "),n("code",[t._v("request_adapter")]),t._v(" will return "),n("code",[t._v("None")]),t._v(". If you want to get all adapters for a particular backend you can use "),n("code",[t._v("enumerate_adapters")]),t._v(". This will give you an iterator that you can loop over to check if one of the adapters works for your needs.")]),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(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate_adapters")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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("// Check if this adapter supports our surface")]),t._v("\n        surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_preferred_format")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),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("is_some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),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 function"}},[t._v("unwrap")]),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("Another thing to note is that "),n("code",[t._v("Adapter")]),t._v("s are locked to a specific backend. If you are on Windows and have 2 graphics cards you'll have at least 4 adapters available to use, 2 Vulkan and 2 DirectX.")]),t._v(" "),n("p",[t._v("For more fields you can use to refine your search "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/struct.Adapter.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("h3",{attrs:{id:"the-surface-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface-2"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("surface")]),t._v(" is the part of the window that we draw to. We need it to draw directly to the screen. Our "),n("code",[t._v("window")]),t._v(" needs to implement "),n("a",{attrs:{href:"https://crates.io/crates/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),n("OutboundLink")],1),t._v("'s "),n("code",[t._v("HasRawWindowHandle")]),t._v(" trait to create a surface. Fortunately, winit's "),n("code",[t._v("Window")]),t._v(" fits the bill. We also need it to request our "),n("code",[t._v("adapter")]),t._v(".")]),t._v(" "),n("h3",{attrs:{id:"device-and-queue"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#device-and-queue"}},[t._v("#")]),t._v(" Device and Queue")]),t._v(" "),n("p",[t._v("Let's use the "),n("code",[t._v("adapter")]),t._v(" to create the device and queue.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),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(" adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),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("DeviceDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                features"),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("Features")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("empty")]),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                limits"),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("Limits")]),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(",")]),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("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 class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Trace path")]),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 keyword"}},[t._v("await")]),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("p",[t._v("The "),n("code",[t._v("features")]),t._v(" field on "),n("code",[t._v("DeviceDescriptor")]),t._v(", allows us to specify what extra features we want. For this simple example, I've decided not to use any extra features.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The graphics card you have limits the features you can use. If you want to use certain features you may need to limit what devices you support, or provide workarounds.")]),t._v(" "),n("p",[t._v("You can get a list of features supported by your device using "),n("code",[t._v("adapter.features()")]),t._v(", or "),n("code",[t._v("device.features()")]),t._v(".")]),t._v(" "),n("p",[t._v("You can view a full list of features "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/struct.Features.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("limits")]),t._v(" field describes the limit of certain types of resources that we can create. We'll use the defaults for this tutorial, so we can support most devices. You can view a list of limits "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/struct.Limits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),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("SurfaceConfiguration")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),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(" surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_preferred_format")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),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            width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),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(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            present_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("PresentMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),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        surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),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("config"),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 are defining a config for our surface. This will define how the surface creates its underlying "),n("code",[t._v("SurfaceTexture")]),t._v("s. We will talk about "),n("code",[t._v("SurfaceTexture")]),t._v(" when we get to the "),n("code",[t._v("render")]),t._v(" function. For now lets talk about the config's fields.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("usage")]),t._v(" field describes how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be used. "),n("code",[t._v("RENDER_ATTACHMENT")]),t._v(" specifies that the textures will be used to write to the screen (we'll talk about more "),n("code",[t._v("TextureUsages")]),t._v("s later).")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("format")]),t._v(" defines how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be stored on the gpu. Different displays prefer different formats. We use "),n("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" to figure out the best format to use based on the display you're using.")]),t._v(" "),n("p",[n("code",[t._v("width")]),t._v(" and "),n("code",[t._v("height")]),t._v(" are the width and the height in pixels of a "),n("code",[t._v("SurfaceTexture")]),t._v(". This should usually be the width and the height of the window.")]),t._v(" "),n("div",{staticClass:"warning"},[t._v("\nMake sure that the width and height of the `SurfaceTexture` are not 0, as that can cause your app to crash.\n")]),t._v(" "),n("p",[n("code",[t._v("present_mode")]),t._v(" uses "),n("code",[t._v("wgpu::PresentMode")]),t._v(" enum which determines how to sync the surface with the display. The option we picked, "),n("code",[t._v("FIFO")]),t._v(", will cap the display rate at the displays framerate. This is essentially VSync. This is also the most optimal mode on mobile. There are other options and you can see all of them "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/enum.PresentMode.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the docs"),n("OutboundLink")],1)]),t._v(" "),n("p",[t._v("Now that we've configured our surface properly we can add these new fields at the end of the method.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[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            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            config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll want to call this in our main method before we enter the event loop.")]),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("// State::new uses async code, so we're going to wait for it to finish")]),t._v("\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(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),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 operator"}},[t._v("&")]),t._v("window"),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("div",{staticClass:"note"},[n("p",[t._v("You can use heavier libraries like "),n("a",{attrs:{href:"https://docs.rs/async_std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async_std"),n("OutboundLink")],1),t._v(" and "),n("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),n("OutboundLink")],1),t._v(" to make main async, so you can await futures. I've elected not to use these crates as this tutorial is not about writing an async application, and the futures created by wgpu do not require "),n("a",{attrs:{href:"https://rust-lang.github.io/async-book/08_ecosystem/00_chapter.html#determining-ecosystem-compatibility",target:"_blank",rel:"noopener noreferrer"}},[t._v("special executor support"),n("OutboundLink")],1),t._v(". We just need some way to interact with wgpu's async functions, and the "),n("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster crate"),n("OutboundLink")],1),t._v(" is enough for that.")])]),t._v(" "),n("h2",{attrs:{id:"resize"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#resize"}},[t._v("#")]),t._v(" resize()")]),t._v(" "),n("p",[t._v("If we want to support resizing in our application, we're going to need to reconfigure the "),n("code",[t._v("surface")]),t._v(" everytime the window's size changes. That's the reason we stored the physical "),n("code",[t._v("size")]),t._v(" and the "),n("code",[t._v("config")]),t._v(" used to configure the "),n("code",[t._v("surface")]),t._v(". With all of these, the resize method is very simple.")]),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("// impl State")]),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("resize")]),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("mut")]),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(" new_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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),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(".")]),t._v("size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),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(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),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(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),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(".")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),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("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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),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("There's nothing really different here from the initial "),n("code",[t._v("surface")]),t._v(" configuration, so I won't get into it.")]),t._v(" "),n("p",[t._v("We call this method in "),n("code",[t._v("main()")]),t._v(" in the event loop for the following events.")]),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("match")]),t._v(" event "),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    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),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 keyword"}},[t._v("match")]),t._v(" event "),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            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),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("{")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),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 class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),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 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("{")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new_inner_size is &&mut so we have to dereference it twice")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),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 operator"}},[t._v("*")]),t._v("new_inner_size"),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 comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"input"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input()")]),t._v(" "),n("p",[n("code",[t._v("input()")]),t._v(" returns a "),n("code",[t._v("bool")]),t._v(" to indicate whether an event has been fully processed. If the method returns "),n("code",[t._v("true")]),t._v(", the main loop won't process the event any further.")]),t._v(" "),n("p",[t._v("We're just going to return false for now because we don't have any events we want to capture.")]),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("// impl State")]),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("input")]),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("mut")]),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(" event"),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 class-name"}},[t._v("WindowEvent")]),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("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to do a little more work in the event loop. We want "),n("code",[t._v("State")]),t._v(" to have priority over "),n("code",[t._v("main()")]),t._v(". Doing that (and previous changes) should have your loop looking like this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),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("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),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 comment"}},[t._v("// UPDATED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n                        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                            virtual_keycode"),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 class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),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 punctuation"}},[t._v("..")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),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("{")]),t._v("\n                    state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),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 class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),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 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("{")]),t._v("\n                    state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),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 operator"}},[t._v("*")]),t._v("new_inner_size"),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 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("}")]),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 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("}")]),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(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"update"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update"}},[t._v("#")]),t._v(" update()")]),t._v(" "),n("p",[t._v("We don't have anything to update yet, so leave the method empty.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),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("mut")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// remove `todo!()`")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll add some code here later on to move around objects.")]),t._v(" "),n("h2",{attrs:{id:"render"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render()")]),t._v(" "),n("p",[t._v("Here's where the magic happens. First we need to get a frame to render to.")]),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("// impl State")]),t._v("\n\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("render")]),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("mut")]),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(" "),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 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("SurfaceError")]),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(" output "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),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 operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("get_current_texture")]),t._v(" function will wait for the "),n("code",[t._v("surface")]),t._v(" to provide a new "),n("code",[t._v("SurfaceTexture")]),t._v(" that we will render to. We'll store this in "),n("code",[t._v("output")]),t._v(" for later.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("    "),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(" output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("p",[t._v("This line creates a "),n("code",[t._v("TextureView")]),t._v(" with default settings. We need to do this because we want to control how the render code interacts with the texture.")]),t._v(" "),n("p",[t._v("We also need to create a "),n("code",[t._v("CommandEncoder")]),t._v(" to create the actual commands to send to the gpu. Most modern graphics frameworks expect commands to be stored in a command buffer before being sent to the gpu. The "),n("code",[t._v("encoder")]),t._v(" builds a command buffer that we can then send to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("    "),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(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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('"Render 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")])])]),n("p",[t._v("Now we can actually get to clearing the screen (long time coming). We need to use the "),n("code",[t._v("encoder")]),t._v(" to create a "),n("code",[t._v("RenderPass")]),t._v(". The "),n("code",[t._v("RenderPass")]),t._v(" has all the methods for the actual drawing. The code for creating a "),n("code",[t._v("RenderPass")]),t._v(" is a bit nested, so I'll copy it all here before talking about its pieces.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[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(" _render_pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("begin_render_pass")]),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("RenderPassDescriptor")]),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 Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            color_attachments"),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 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("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resolve_target"),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                ops"),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("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    load"),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("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),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                    store"),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            "),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            depth_stencil_attachment"),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(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// submit will accept anything that implements IntoIter")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),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    output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),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 class-name"}},[t._v("Ok")]),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 punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("First things first, let's talk about the extra block ("),n("code",[t._v("{}")]),t._v(") around "),n("code",[t._v("encoder.begin_render_pass(...)")]),t._v(". "),n("code",[t._v("begin_render_pass()")]),t._v(" borrows "),n("code",[t._v("encoder")]),t._v(" mutably (aka "),n("code",[t._v("&mut self")]),t._v("). We can't call "),n("code",[t._v("encoder.finish()")]),t._v(" until we release that mutable borrow. The block tells rust to drop any variables within it when the code leaves that scope thus releasing the mutable borrow on "),n("code",[t._v("encoder")]),t._v(" and allowing us to "),n("code",[t._v("finish()")]),t._v(" it. If you don't like the "),n("code",[t._v("{}")]),t._v(", you can also use "),n("code",[t._v("drop(render_pass)")]),t._v(" to achieve the same effect.")]),t._v(" "),n("p",[t._v("We can get the same results by removing the "),n("code",[t._v("{}")]),t._v(", and the "),n("code",[t._v("let _render_pass =")]),t._v(" line, but we need access to the "),n("code",[t._v("_render_pass")]),t._v(" in the next tutorial, so we'll leave it as is.")]),t._v(" "),n("p",[t._v("The last lines of the code tell "),n("code",[t._v("wgpu")]),t._v(" to finish the command buffer, and to submit it to the gpu's render queue.")]),t._v(" "),n("p",[t._v("We need to update the event loop again to call this method. We'll also call update before it too.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 keyword"}},[t._v("match")]),t._v(" event "),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 class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),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 operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),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("match")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),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 class-name"}},[t._v("Ok")]),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 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("}")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Reconfigure the surface if lost")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Lost")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),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 system is out of memory, we should probably quit")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutOfMemory")]),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("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All other errors (Outdated, Timeout) should be resolved by the next frame")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),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 macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?}"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),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 class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainEventsCleared")]),t._v(" "),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 comment"}},[t._v("// RedrawRequested will only trigger once, unless we manually")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// request it.")]),t._v("\n            window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_redraw")]),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 comment"}},[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(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that, you should be getting something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(208),alt:"Window with a blue background"}})]),t._v(" "),n("h2",{attrs:{id:"wait-what-s-going-on-with-renderpassdescriptor"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wait-what-s-going-on-with-renderpassdescriptor"}},[t._v("#")]),t._v(" Wait, what's going on with RenderPassDescriptor?")]),t._v(" "),n("p",[t._v("Some of you may be able to tell what's going on just by looking at it, but I'd be remiss if I didn't go over it. Let's take a look at the code again.")]),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 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("RenderPassDescriptor")]),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 Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    color_attachments"),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 comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    depth_stencil_attachment"),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("}")]),t._v("\n")])])]),n("p",[t._v("A "),n("code",[t._v("RenderPassDescriptor")]),t._v(" only has three fields: "),n("code",[t._v("label")]),t._v(", "),n("code",[t._v("color_attachments")]),t._v(" and "),n("code",[t._v("depth_stencil_attachment")]),t._v(". The "),n("code",[t._v("color_attachements")]),t._v(" describe where we are going to draw our color to. We use the "),n("code",[t._v("TextureView")]),t._v(" we created earlier to make sure that we render to the screen.")]),t._v(" "),n("p",[t._v("We'll use "),n("code",[t._v("depth_stencil_attachment")]),t._v(" later, but we'll set it to "),n("code",[t._v("None")]),t._v(" for 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 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("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    resolve_target"),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    ops"),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("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        load"),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("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),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        store"),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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("RenderPassColorAttachment")]),t._v(" has the "),n("code",[t._v("view")]),t._v(" field which informs "),n("code",[t._v("wgpu")]),t._v(" what texture to save the colors to. In this case we specify "),n("code",[t._v("frame.view")]),t._v(" that we created using "),n("code",[t._v("surface.get_current_texture()")]),t._v(". This means that any colors we draw to this attachment will get drawn to the screen.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("resolve_target")]),t._v(" is the texture that will receive the resolved output. This will be the same as "),n("code",[t._v("view")]),t._v(" unless multisampling is enabled. We don't need to specify this, so we leave it as "),n("code",[t._v("None")]),t._v(".")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("ops")]),t._v(" field takes a "),n("code",[t._v("wpgu::Operations")]),t._v(" object. This tells wgpu what to do with the colors on the screen (specified by "),n("code",[t._v("frame.view")]),t._v("). The "),n("code",[t._v("load")]),t._v(" field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The "),n("code",[t._v("store")]),t._v(" field tells wgpu whether we want to store the rendered results to the "),n("code",[t._v("Texture")]),t._v(" behind our "),n("code",[t._v("TextureView")]),t._v(" (in this case it's the "),n("code",[t._v("SurfaceTexture")]),t._v("). We use "),n("code",[t._v("true")]),t._v(" as we do want to store our render results. There are cases when you wouldn't want to but those")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(209),alt:"./no-clear.png"}})])]),t._v(" "),n("h2",{attrs:{id:"validation-errors"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#validation-errors"}},[t._v("#")]),t._v(" Validation Errors?")]),t._v(" "),n("p",[t._v("If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version "),n("code",[t._v("1.2.182")]),t._v(" as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at "),n("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/gfx-rs/wgpu"),n("OutboundLink")],1)]),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("Modify the "),n("code",[t._v("input()")]),t._v(" method to capture mouse events, and update the clear color using that. "),n("em",[t._v("Hint: you'll probably need to use "),n("code",[t._v("WindowEvent::CursorMoved")])]),t._v(".")]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{208:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyIAAAJzCAYAAADz6Ke4AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AABcCSURBVHic7d19jF31nd/xz51HA8Y2NhiwHbCdiBCbDQ4LbBvW2W5CFnW7VdpUbVI1Uf+IEnX/zv7X/lO1Up/UqpXaqEkrRW2yD223u93dPmwIKCxqaBoIm7AECBiMEz/NGONnsD0z9/QPwIGACtj4Y0Jer79m7pzzm69mpHvue865Z0br1q0bhmHI5ORkbrnllmzZsiVXXHFFZmZmAgAAcC4WFhZy6NChXDu7K3//33w9p5aWMhqNMjUMQ1asWJFPfOIT2b59e7Zv357Z2dkLPS8AAPAOcezYsTzwwAP5zOLmfPWrX83Ro0czNTk5mU9+8pP5/Oc/nyQ5dOhQxuPxBR4VAAB4p5icnMz73//+3HzzzUmSL37xi5m6+eab85GPfCSj0ShHjx69wCMCAADvNEtLS1laWsqpU6dy6623Zv3apUxt2bIlN954Y44fP55hGC70jAAAwDvYddddl/vuuy9Ta9euzYoVK5wNAQAAzrupqamsXr06EzMzM1laWrrQ8wAAAD8jpqenM5W8cM2Wy7IAAIAWIQIAANRNJHFpFsBPo/He/O//8K/yL//9Xdl5+jzuc75nepWlPH3nF/LP/uk/z3956Ln4MxnAhTM3N5fvfe97r/j3HsMw5KGHHsq+ffvOaW1nRAB+Wg3JsLCYxdPjZBhnGEZntc9wck8e/tP9Wb71pmxa8QbWeKtneg0zsxNJRpmZnXB8AngDvva1ryVJ7rjjjrdszUOHDp2JkImJiWzdujXDMOThhx/Ovn37sn///szOzuayyy47q/WnkmQ8HnuiB/hpM7Exv/Z3/0n+2rCYo/PP5LnxG3gef9U+4xx//Fu5+75n84Frt2XjpRP9mV5lyGj0YsAMQzIMzooAvEFv5Wv6tWvXZvPmzdmxY0f27NmT0WiUpaWlM2dC3v3ud2ft2rU5ffrsToGfOSMCwIV2Ig/97r/Lnbsuyc9/8jP55fWjPPN/vpL/+M35DMu35a9/9vZcM3Eo9//Wl/Mnc1fkFz/1wRz+1/8tDy9szq/++l/Nlqmn8sf/9vfz+Ibb87ENu3Pv/TvyzKnprN78C/nor/x81s0mWXwkv/33fv/FfT6Wq5/6ev7HvU9ncTzOt3/zX+Tbo4vycx//O7lj02RvpiSn5/40X7/zW9lxcDGXbLgx29bMZpQTZ34yw/N78uA99+bBJ+dyYmk2qzZcn1/4pV/M+y4//ebm+9ufyp9bc45nfQB+RiwsLOTWW2/N1NRUHnvssezevfvM166//vrcdNNNOXjw4Fmv79IsgLeN5bluy/rc/fTuzM8dyXjdTObnDyXT05l8/kAOHBnnXcvmsv/gkInV1+d9a5flwYkko9nMjoYMmc3sRLLw1Dfye7suzbpr35XVP9qZAz/4k9x52fp8+rYrM/HiNi/tszhMZdlMMpyczdVbPpCNK5dlw+Wjlx0TCjMt7s43//s38tihIdOXrcvK5x/JN7/7XIZMJBkyjA/mO3/4e7ln9+ksW3NtNl50OD98+jv5n888l4lP/aU3N98VybDkeAe8M9x1112veg1/5513nvn4ox/96DmtPwxDDhw4kG3btmVubi6HDh1KkqxevTrbtm3LgQMHzml9IQLwtrGUi9ZvyuqJH2b/nv15/oZl2bt3nKtuuiUzDzyYffMns7Bsb/YsJBdvviarFhd+vOswnHkeH8YzueFv/UY+/XMzee7BL+cf/s4jOXzw2Zwa1mbZy5/rh4msu+Uv5qYnHsrTxy7Je7b/Wn712lFOHnk2x04PtZlm9u3IjiPjjNbcls98/uN5z8zRfOtL/yi/+/g4yZClfY/kz/acysTlfyGf+42/nGsmT+aR3/7H+fKDT+S7jx3Oe9/zJuZbGqJDgIa77rrr//v122+//bzP8Fa8vh+GIffee++ZCEmSZ599Nvfcc0+2bt3640tpz4JLswDeRsaXXZNNFyf3792fuQPLsvfkRdl03ZbMPHF/Hpo7kGdm9+S5TGfLxrUZZ89rLzKxPhtXH8refeOMZlflklFy9IW3WvyEIaeOHsqp4YWPF48fzIEDrz6gnO+ZFp4/nhPjUWY2bsrKZ/dkz3gyl2+8IhOPzyVJFo4dzpHxKNMb1mXZ/J7sHSay8pp1mfzO4zl4+FAW38x8/ugGvIN89rOfPfPxl770pSTJ5z73uTOPPfXUU+e0/jAM+f73v5/9+/cnSbZu3ZrxeJxHH330FY+dbYw4IwLwNjIsXp6NG6dz/6MHsn/XTJ4drc+fX70qsxsmc9/83uyaPphh4tpsump45Yvql519yMR0JsZLGUbJePGlbUav3ObMPq/47q8RK+d/pky8cAAbjU/n+aUhE1nI6aWXDmpDMvniG+jHp3NyPGQySzm58MJtJEcTU2c/H8B59PIgeC1PPvnkOX+P11rjrVj3JUeOHMn8/HyS5L3vfW9uuOGGJC+0w+OPP575+fls2LAhK1euPKv13TUL4O1kGOXKTRsy8f25PL1rNllzY9ZOJtPrrspo587snBpndOXmrJ8aZ1h82W4/ERXD0pBhIi+729Tw6m1evBvVaGKUDEtZWBhnGF7jrlnneabplZdl+WjI0R/tzN7T67J+6kT2/PBAxi8skpkrrsyaiUdzYPeu7Du9IeunT2b30/uyNJrI2itXZzTOG5/vx7fBBzivduzYcUG+71t916wPf/jD2bVr1yveE3LTTTdlPB5n48aNmZmZycmTJ89q/TNnRM7l+i4A3irjzKzblCtGO7N/3/OZ3XZVLh3Gydqrc/GJ+7N/SFZu3ZDlQ7L4+ou9AbNZtfrijIZj+d7/+k+ZWzGR1R/4eH753dO1mUZrt+b9a/5v7j34QP7wN3fnitkTOXBwMcmLx6U1H8j2676d//qDH399bv54cum2fPB9lyRLi+WfGcDbz0tnYN7KADp58mSWL1+em2++OXNzc2cen5+fzy233JITJ07k+PHjZ73+mRCZnJx8vW0BKFha/q5sXpHsPzzKuvVrMh4Pyaqrc/XEkB8sXZTN11yWxfHSq89uvMbnr7/NKOtv+yv54L4/yP0/eiZzuSqbVrz6nwiez5nGi2vyS5/+eI7/5z/On80dyekNH8ln7pjPV77ynWRIxqcm876/+ev5G3f+Ub7x3Z3Zd2Ima67bnl/52O25dunZHB/exHzn+LsBeLt64oknzsu6x44dy7Fjx171+EvvETkXoy984QvDhz70oUxPT7/+1gCcf6OLs3bThqyaGvL8/NP50eGFZGplNmy6MhePlnJs787sOz5ORpfkys3rs3LiePY/uTdHh5/4fJyMLlqbje9alann5rNz9+Es/uQ+42Q0fWnWXn1FLp2dTJZO5/D+H+aZ54beTEkmlq3KlVeuyfKZZOHEocwfn8nVV12ak3NPZc+RpWRyWVZdfnlWLb8o0xPjLDx/LM8eeCZHT43f3HwAvC3cfffdL4TIbbfdlmXLll3oeQAAgJ8Bd9999wuXZs3OznqzOgAAUDOVvLXvrgcAAHg9r3GfRgAAgPPLGREAAKBuKkn+wW9940LPAQAA/IzYvm7k0iwAAKBPiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAOiECAADUCREAAKBOiAAAAHVCBAAAqBMiAABAnRABAADqhAgAAFAnRAAAgDohAgAA1AkRAACgTogAAAB1QgQAAKgTIgAAQJ0QAQAA6oQIAABQJ0QAAIA6IQIAANQJEQAAoE6IAAAAdUIEAACoEyIAAECdEAEAAOqECAAAUCdEAACAuqkk2b5udKHnAAAAfob8P4Fe1tYvSjndAAAAAElFTkSuQmCC"},209:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},316: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:"the-surface"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("h2",{attrs:{id:"first-some-housekeeping-state"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#first-some-housekeeping-state"}},[t._v("#")]),t._v(" First, some housekeeping: State")]),t._v(" "),n("p",[t._v("For convenience, we're going to pack all the fields into a struct and create some methods on that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),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("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token 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    config"),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("SurfaceConfiguration")]),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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Creating some of the wgpu types requires async code")]),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("(")]),t._v("window"),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 class-name"}},[t._v("Window")]),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 macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),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("mut")]),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(" new_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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),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("mut")]),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(" event"),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 class-name"}},[t._v("WindowEvent")]),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("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),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("mut")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),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("mut")]),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(" "),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 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("SurfaceError")]),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 macro property"}},[t._v("todo!")]),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("I'm glossing over "),n("code",[t._v("State")]),t._v("s fields, but they'll make more sense as I explain the code behind the methods.")]),t._v(" "),n("h2",{attrs:{id:"state-new"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#state-new"}},[t._v("#")]),t._v(" State::new()")]),t._v(" "),n("p",[t._v("The code for this is pretty straight forward, but let's break this down a bit.")]),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 comment"}},[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("(")]),t._v("window"),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 class-name"}},[t._v("Window")]),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 keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("inner_size")]),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 comment"}},[t._v("// The instance is a handle to our GPU")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Backends::all => Vulkan + Metal + DX12 + Browser WebGPU")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance "),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("Instance")]),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 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("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),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(" surface "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),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("RequestAdapterOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                power_preference"),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("PowerPreference")]),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(",")]),t._v("\n                compatible_surface"),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 operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                force_fallback_adapter"),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            "),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 keyword"}},[t._v("await")]),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("h3",{attrs:{id:"instance-and-adapter"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#instance-and-adapter"}},[t._v("#")]),t._v(" Instance and Adapter")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("instance")]),t._v(" is the first thing you create when using wgpu. Its main purpose\nis to create "),n("code",[t._v("Adapter")]),t._v("s and "),n("code",[t._v("Surface")]),t._v("s.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("adapter")]),t._v(" is a handle to our actual graphics card. You can use this to get information about the graphics card such as its name and what backend the adapter uses. We use this to create our "),n("code",[t._v("Device")]),t._v(" and "),n("code",[t._v("Queue")]),t._v(" later. Let's discuss the fields of "),n("code",[t._v("RequestAdapterOptions")]),t._v(".")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("power_preference")]),t._v(" has two variants: "),n("code",[t._v("LowPower")]),t._v(", and "),n("code",[t._v("HighPerformance")]),t._v(". This means will pick an adapter that favors battery life such as a integrated GPU when using "),n("code",[t._v("LowPower")]),t._v(". "),n("code",[t._v("HighPerformance")]),t._v(" as will pick an adapter for more power hungry yet more performant GPU's such as your dedicated graphics card. WGPU will favor "),n("code",[t._v("LowPower")]),t._v(" if there is no adapter for the "),n("code",[t._v("HighPerformance")]),t._v(" option.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("compatible_surface")]),t._v(" field tells wgpu to find an adapter that can present to the supplied surface.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("force_fallback_adapter")]),t._v(' forces wgpu to pick an adapter that will work on all harware. This usually means that the rendering backend will use a "software" system, instead of hardware such as a GPU.')])]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The options I've passed to "),n("code",[t._v("request_adapter")]),t._v(" aren't guaranteed to work for all devices, but will work for most of them. If wgpu can't find an adapter with the required permissions, "),n("code",[t._v("request_adapter")]),t._v(" will return "),n("code",[t._v("None")]),t._v(". If you want to get all adapters for a particular backend you can use "),n("code",[t._v("enumerate_adapters")]),t._v(". This will give you an iterator that you can loop over to check if one of the adapters works for your needs.")]),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(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate_adapters")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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("// Check if this adapter supports our surface")]),t._v("\n        surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_preferred_format")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),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("is_some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),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 function"}},[t._v("unwrap")]),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("Another thing to note is that "),n("code",[t._v("Adapter")]),t._v("s are locked to a specific backend. If you are on Windows and have 2 graphics cards you'll have at least 4 adapters available to use, 2 Vulkan and 2 DirectX.")]),t._v(" "),n("p",[t._v("For more fields you can use to refine your search "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/struct.Adapter.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("h3",{attrs:{id:"the-surface-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface-2"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("surface")]),t._v(" is the part of the window that we draw to. We need it to draw directly to the screen. Our "),n("code",[t._v("window")]),t._v(" needs to implement "),n("a",{attrs:{href:"https://crates.io/crates/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),n("OutboundLink")],1),t._v("'s "),n("code",[t._v("HasRawWindowHandle")]),t._v(" trait to create a surface. Fortunately, winit's "),n("code",[t._v("Window")]),t._v(" fits the bill. We also need it to request our "),n("code",[t._v("adapter")]),t._v(".")]),t._v(" "),n("h3",{attrs:{id:"device-and-queue"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#device-and-queue"}},[t._v("#")]),t._v(" Device and Queue")]),t._v(" "),n("p",[t._v("Let's use the "),n("code",[t._v("adapter")]),t._v(" to create the device and queue.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),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(" adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),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("DeviceDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                features"),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("Features")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("empty")]),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                limits"),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("Limits")]),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(",")]),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("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 class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Trace path")]),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 keyword"}},[t._v("await")]),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("p",[t._v("The "),n("code",[t._v("features")]),t._v(" field on "),n("code",[t._v("DeviceDescriptor")]),t._v(", allows us to specify what extra features we want. For this simple example, I've decided not to use any extra features.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The graphics card you have limits the features you can use. If you want to use certain features you may need to limit what devices you support, or provide workarounds.")]),t._v(" "),n("p",[t._v("You can get a list of features supported by your device using "),n("code",[t._v("adapter.features()")]),t._v(", or "),n("code",[t._v("device.features()")]),t._v(".")]),t._v(" "),n("p",[t._v("You can view a full list of features "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/struct.Features.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("limits")]),t._v(" field describes the limit of certain types of resources that we can create. We'll use the defaults for this tutorial, so we can support most devices. You can view a list of limits "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/struct.Limits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),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("SurfaceConfiguration")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),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(" surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_preferred_format")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),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            width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),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(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            present_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("PresentMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),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        surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),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("config"),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 are defining a config for our surface. This will define how the surface creates its underlying "),n("code",[t._v("SurfaceTexture")]),t._v("s. We will talk about "),n("code",[t._v("SurfaceTexture")]),t._v(" when we get to the "),n("code",[t._v("render")]),t._v(" function. For now lets talk about the config's fields.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("usage")]),t._v(" field describes how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be used. "),n("code",[t._v("RENDER_ATTACHMENT")]),t._v(" specifies that the textures will be used to write to the screen (we'll talk about more "),n("code",[t._v("TextureUsages")]),t._v("s later).")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("format")]),t._v(" defines how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be stored on the gpu. Different displays prefer different formats. We use "),n("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" to figure out the best format to use based on the display you're using.")]),t._v(" "),n("p",[n("code",[t._v("width")]),t._v(" and "),n("code",[t._v("height")]),t._v(" are the width and the height in pixels of a "),n("code",[t._v("SurfaceTexture")]),t._v(". This should usually be the width and the height of the window.")]),t._v(" "),n("div",{staticClass:"warning"},[t._v("\nMake sure that the width and height of the `SurfaceTexture` are not 0, as that can cause your app to crash.\n")]),t._v(" "),n("p",[n("code",[t._v("present_mode")]),t._v(" uses "),n("code",[t._v("wgpu::PresentMode")]),t._v(" enum which determines how to sync the surface with the display. The option we picked, "),n("code",[t._v("FIFO")]),t._v(", will cap the display rate at the displays framerate. This is essentially VSync. This is also the most optimal mode on mobile. There are other options and you can see all of them "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.10.1/wgpu/enum.PresentMode.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the docs"),n("OutboundLink")],1)]),t._v(" "),n("p",[t._v("Now that we've configured our surface properly we can add these new fields at the end of the method.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[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            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            config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll want to call this in our main method before we enter the event loop.")]),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("// State::new uses async code, so we're going to wait for it to finish")]),t._v("\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(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),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 operator"}},[t._v("&")]),t._v("window"),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("div",{staticClass:"note"},[n("p",[t._v("You can use heavier libraries like "),n("a",{attrs:{href:"https://docs.rs/async_std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async_std"),n("OutboundLink")],1),t._v(" and "),n("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),n("OutboundLink")],1),t._v(" to make main async, so you can await futures. I've elected not to use these crates as this tutorial is not about writing an async application, and the futures created by wgpu do not require "),n("a",{attrs:{href:"https://rust-lang.github.io/async-book/08_ecosystem/00_chapter.html#determining-ecosystem-compatibility",target:"_blank",rel:"noopener noreferrer"}},[t._v("special executor support"),n("OutboundLink")],1),t._v(". We just need some way to interact with wgpu's async functions, and the "),n("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster crate"),n("OutboundLink")],1),t._v(" is enough for that.")])]),t._v(" "),n("h2",{attrs:{id:"resize"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#resize"}},[t._v("#")]),t._v(" resize()")]),t._v(" "),n("p",[t._v("If we want to support resizing in our application, we're going to need to reconfigure the "),n("code",[t._v("surface")]),t._v(" everytime the window's size changes. That's the reason we stored the physical "),n("code",[t._v("size")]),t._v(" and the "),n("code",[t._v("config")]),t._v(" used to configure the "),n("code",[t._v("surface")]),t._v(". With all of these, the resize method is very simple.")]),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("// impl State")]),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("resize")]),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("mut")]),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(" new_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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),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(".")]),t._v("size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),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(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),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(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),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(".")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),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("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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),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("There's nothing really different here from the initial "),n("code",[t._v("surface")]),t._v(" configuration, so I won't get into it.")]),t._v(" "),n("p",[t._v("We call this method in "),n("code",[t._v("main()")]),t._v(" in the event loop for the following events.")]),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("match")]),t._v(" event "),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    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),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 keyword"}},[t._v("match")]),t._v(" event "),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            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),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("{")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),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 class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),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 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("{")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new_inner_size is &&mut so we have to dereference it twice")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),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 operator"}},[t._v("*")]),t._v("new_inner_size"),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 comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"input"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input()")]),t._v(" "),n("p",[n("code",[t._v("input()")]),t._v(" returns a "),n("code",[t._v("bool")]),t._v(" to indicate whether an event has been fully processed. If the method returns "),n("code",[t._v("true")]),t._v(", the main loop won't process the event any further.")]),t._v(" "),n("p",[t._v("We're just going to return false for now because we don't have any events we want to capture.")]),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("// impl State")]),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("input")]),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("mut")]),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(" event"),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 class-name"}},[t._v("WindowEvent")]),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("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to do a little more work in the event loop. We want "),n("code",[t._v("State")]),t._v(" to have priority over "),n("code",[t._v("main()")]),t._v(". Doing that (and previous changes) should have your loop looking like this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),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("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),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 comment"}},[t._v("// UPDATED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n                        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                            virtual_keycode"),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 class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),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 punctuation"}},[t._v("..")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),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("{")]),t._v("\n                    state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),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 class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),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 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("{")]),t._v("\n                    state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),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 operator"}},[t._v("*")]),t._v("new_inner_size"),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 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("}")]),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 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("}")]),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(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"update"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update"}},[t._v("#")]),t._v(" update()")]),t._v(" "),n("p",[t._v("We don't have anything to update yet, so leave the method empty.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),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("mut")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// remove `todo!()`")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll add some code here later on to move around objects.")]),t._v(" "),n("h2",{attrs:{id:"render"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render()")]),t._v(" "),n("p",[t._v("Here's where the magic happens. First we need to get a frame to render to.")]),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("// impl State")]),t._v("\n\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("render")]),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("mut")]),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(" "),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 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("SurfaceError")]),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(" output "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),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 operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("get_current_texture")]),t._v(" function will wait for the "),n("code",[t._v("surface")]),t._v(" to provide a new "),n("code",[t._v("SurfaceTexture")]),t._v(" that we will render to. We'll store this in "),n("code",[t._v("output")]),t._v(" for later.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("    "),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(" output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("p",[t._v("This line creates a "),n("code",[t._v("TextureView")]),t._v(" with default settings. We need to do this because we want to control how the render code interacts with the texture.")]),t._v(" "),n("p",[t._v("We also need to create a "),n("code",[t._v("CommandEncoder")]),t._v(" to create the actual commands to send to the gpu. Most modern graphics frameworks expect commands to be stored in a command buffer before being sent to the gpu. The "),n("code",[t._v("encoder")]),t._v(" builds a command buffer that we can then send to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("    "),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(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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('"Render 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")])])]),n("p",[t._v("Now we can actually get to clearing the screen (long time coming). We need to use the "),n("code",[t._v("encoder")]),t._v(" to create a "),n("code",[t._v("RenderPass")]),t._v(". The "),n("code",[t._v("RenderPass")]),t._v(" has all the methods for the actual drawing. The code for creating a "),n("code",[t._v("RenderPass")]),t._v(" is a bit nested, so I'll copy it all here before talking about its pieces.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[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(" _render_pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("begin_render_pass")]),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("RenderPassDescriptor")]),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 Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            color_attachments"),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 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("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                resolve_target"),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                ops"),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("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    load"),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("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),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                    store"),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            "),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            depth_stencil_attachment"),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(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// submit will accept anything that implements IntoIter")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),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    output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),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 class-name"}},[t._v("Ok")]),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 punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("First things first, let's talk about the extra block ("),n("code",[t._v("{}")]),t._v(") around "),n("code",[t._v("encoder.begin_render_pass(...)")]),t._v(". "),n("code",[t._v("begin_render_pass()")]),t._v(" borrows "),n("code",[t._v("encoder")]),t._v(" mutably (aka "),n("code",[t._v("&mut self")]),t._v("). We can't call "),n("code",[t._v("encoder.finish()")]),t._v(" until we release that mutable borrow. The block tells rust to drop any variables within it when the code leaves that scope thus releasing the mutable borrow on "),n("code",[t._v("encoder")]),t._v(" and allowing us to "),n("code",[t._v("finish()")]),t._v(" it. If you don't like the "),n("code",[t._v("{}")]),t._v(", you can also use "),n("code",[t._v("drop(render_pass)")]),t._v(" to achieve the same effect.")]),t._v(" "),n("p",[t._v("We can get the same results by removing the "),n("code",[t._v("{}")]),t._v(", and the "),n("code",[t._v("let _render_pass =")]),t._v(" line, but we need access to the "),n("code",[t._v("_render_pass")]),t._v(" in the next tutorial, so we'll leave it as is.")]),t._v(" "),n("p",[t._v("The last lines of the code tell "),n("code",[t._v("wgpu")]),t._v(" to finish the command buffer, and to submit it to the gpu's render queue.")]),t._v(" "),n("p",[t._v("We need to update the event loop again to call this method. We'll also call update before it too.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 keyword"}},[t._v("match")]),t._v(" event "),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 class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),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("match")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),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 class-name"}},[t._v("Ok")]),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 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("}")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Reconfigure the surface if lost")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Lost")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),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 system is out of memory, we should probably quit")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutOfMemory")]),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("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All other errors (Outdated, Timeout) should be resolved by the next frame")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),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 macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?}"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),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 class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainEventsCleared")]),t._v(" "),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 comment"}},[t._v("// RedrawRequested will only trigger once, unless we manually")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// request it.")]),t._v("\n            window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_redraw")]),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 comment"}},[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(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that, you should be getting something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(208),alt:"Window with a blue background"}})]),t._v(" "),n("h2",{attrs:{id:"wait-what-s-going-on-with-renderpassdescriptor"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wait-what-s-going-on-with-renderpassdescriptor"}},[t._v("#")]),t._v(" Wait, what's going on with RenderPassDescriptor?")]),t._v(" "),n("p",[t._v("Some of you may be able to tell what's going on just by looking at it, but I'd be remiss if I didn't go over it. Let's take a look at the code again.")]),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 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("RenderPassDescriptor")]),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 Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    color_attachments"),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 comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    depth_stencil_attachment"),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("}")]),t._v("\n")])])]),n("p",[t._v("A "),n("code",[t._v("RenderPassDescriptor")]),t._v(" only has three fields: "),n("code",[t._v("label")]),t._v(", "),n("code",[t._v("color_attachments")]),t._v(" and "),n("code",[t._v("depth_stencil_attachment")]),t._v(". The "),n("code",[t._v("color_attachements")]),t._v(" describe where we are going to draw our color to. We use the "),n("code",[t._v("TextureView")]),t._v(" we created earlier to make sure that we render to the screen.")]),t._v(" "),n("p",[t._v("We'll use "),n("code",[t._v("depth_stencil_attachment")]),t._v(" later, but we'll set it to "),n("code",[t._v("None")]),t._v(" for 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 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("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    resolve_target"),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    ops"),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("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        load"),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("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),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        store"),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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("RenderPassColorAttachment")]),t._v(" has the "),n("code",[t._v("view")]),t._v(" field which informs "),n("code",[t._v("wgpu")]),t._v(" what texture to save the colors to. In this case we specify "),n("code",[t._v("frame.view")]),t._v(" that we created using "),n("code",[t._v("surface.get_current_texture()")]),t._v(". This means that any colors we draw to this attachment will get drawn to the screen.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("resolve_target")]),t._v(" is the texture that will receive the resolved output. This will be the same as "),n("code",[t._v("view")]),t._v(" unless multisampling is enabled. We don't need to specify this, so we leave it as "),n("code",[t._v("None")]),t._v(".")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("ops")]),t._v(" field takes a "),n("code",[t._v("wpgu::Operations")]),t._v(" object. This tells wgpu what to do with the colors on the screen (specified by "),n("code",[t._v("frame.view")]),t._v("). The "),n("code",[t._v("load")]),t._v(" field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The "),n("code",[t._v("store")]),t._v(" field tells wgpu whether we want to store the rendered results to the "),n("code",[t._v("Texture")]),t._v(" behind our "),n("code",[t._v("TextureView")]),t._v(" (in this case it's the "),n("code",[t._v("SurfaceTexture")]),t._v("). We use "),n("code",[t._v("true")]),t._v(" as we do want to store our render results. There are cases when you wouldn't want to but those")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(209),alt:"./no-clear.png"}})])]),t._v(" "),n("h2",{attrs:{id:"validation-errors"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#validation-errors"}},[t._v("#")]),t._v(" Validation Errors?")]),t._v(" "),n("p",[t._v("If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version "),n("code",[t._v("1.2.182")]),t._v(" as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at "),n("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/gfx-rs/wgpu"),n("OutboundLink")],1)]),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("Modify the "),n("code",[t._v("input()")]),t._v(" method to capture mouse events, and update the clear color using that. "),n("em",[t._v("Hint: you'll probably need to use "),n("code",[t._v("WindowEvent::CursorMoved")])]),t._v(".")]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/assets/js/17.19aa8b8d.js b/assets/js/17.57f53ce3.js
similarity index 97%
rename from assets/js/17.19aa8b8d.js
rename to assets/js/17.57f53ce3.js
index e3c1f893..9dda409a 100644
--- a/assets/js/17.19aa8b8d.js
+++ b/assets/js/17.57f53ce3.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{247:function(t,s,a){t.exports=a.p+"assets/img/left_right_hand.ccabf5d0.gif"},248:function(t,s,a){t.exports=a.p+"assets/img/screenshot.4f5740bc.png"},327: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:"a-better-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-better-camera"}},[t._v("#")]),t._v(" A Better Camera")]),t._v(" "),n("p",[t._v("I've been putting this off for a while. Implementing a camera isn't specifically related to using WGPU properly, but it's been bugging me so let's do it.")]),t._v(" "),n("p",[n("code",[t._v("main.rs")]),t._v(" is getting a little crowded, so let's create a "),n("code",[t._v("camera.rs")]),t._v(" file to put our camera code. The first thing we're going to put in it in is some imports and our "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),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("use")]),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("event"),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("use")]),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("PhysicalPosition")]),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("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("::")])]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("consts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),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("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),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("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0001")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"the-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera"}},[t._v("#")]),t._v(" The Camera")]),t._v(" "),n("p",[t._v("Next we need create a new "),n("code",[t._v("Camera")]),t._v(" struct. We're going to be using a FPS style camera, so we'll store the position and the yaw (horizontal rotation), and pitch (vertical rotation). We'll have a "),n("code",[t._v("calc_matrix")]),t._v(" method to create our view matrix.")]),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("#[derive(Debug)]")]),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("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),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(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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    yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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    pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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("}")]),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("Camera")]),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("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 operator"}},[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 class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token 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 keyword"}},[t._v("Self")]),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(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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            yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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            pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("}")]),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("calc_matrix")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_to_rh")]),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(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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("\n                "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("cos")]),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin")]),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),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 class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),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("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"the-projection"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-projection"}},[t._v("#")]),t._v(" The Projection")]),t._v(" "),n("p",[t._v("I've decided to split the projection from the camera. The projection only really needs to change if the window resizes, so let's create a "),n("code",[t._v("Projection")]),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("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("Projection")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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    znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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"),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("Projection")]),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("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),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 punctuation"}},[t._v("(")]),t._v("\n        width"),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        height"),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        fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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        zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    "),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 keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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            fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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            znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            zfar"),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    "),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("resize")]),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("mut")]),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(" width"),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(" height"),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("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(".")]),t._v("aspect "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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    "),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("calc_matrix")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),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("fovy"),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("aspect"),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("znear"),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("zfar"),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("On thing to note: "),n("code",[t._v("cgmath")]),t._v(" currently returns a right-handed projection matrix from the "),n("code",[t._v("perspective")]),t._v(" function. This means that the z-axis points out of the screen. If you want the z-axis to be "),n("em",[t._v("into")]),t._v(" the screen (aka. a left-handed projection matrix), you'll have to code your own.")]),t._v(" "),n("p",[t._v("You can tell the difference between a right-handed coordinate system and a left-handed one by using your hands. Point your thumb to the right. This is the x-axis. Point your pointer finger up. This is the y-axis. Extend your middle finger. This is the z-axis. On your right hand your middle finger should be pointing towards you. On your left hand it should be pointing away.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(247),alt:"./left_right_hand.gif"}})]),t._v(" "),n("h1",{attrs:{id:"the-camera-controller"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera-controller"}},[t._v("#")]),t._v(" The Camera Controller")]),t._v(" "),n("p",[t._v("Our camera is different, so we'll need a new camera controller. Add the following to "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug)]")]),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("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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"),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("CameraController")]),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("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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(" sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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 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 keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            sensitivity"),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    "),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("process_keyboard")]),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("mut")]),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(" key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),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("bool")]),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(" amount "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),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("match")]),t._v(" key "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_backward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_left "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Space")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LShift")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_down "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[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        "),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("process_mouse")]),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("mut")]),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(" mouse_dx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dx "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dy "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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    "),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("process_scroll")]),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("mut")]),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(" delta"),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 class-name"}},[t._v("MouseScrollDelta")]),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),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 keyword"}},[t._v("match")]),t._v(" delta "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I'm assuming a line is about 100 pixels")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LineDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PixelDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scroll"),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("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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        "),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("update_camera")]),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("mut")]),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(" camera"),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("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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 keyword"}},[t._v("let")]),t._v(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),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 comment"}},[t._v("// Move forward/backward and left/right")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin_cos")]),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(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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("yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_sin"),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("normalize")]),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(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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 operator"}},[t._v("-")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),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("normalize")]),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        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward "),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("amount_backward"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" right "),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("amount_left"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Move in/out (aka. "zoom")')]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Note: this isn't an actual zoom. The camera's position")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changes when zooming. I've added this to make it easier")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to get closer to an object you want to focus on.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin_cos")]),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(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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("pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_sin"),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("normalize")]),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        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move up/down. Since we don't use roll, we can just")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// modify the y coordinate directly.")]),t._v("\n        camera"),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("y "),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("amount_down"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rotate")]),t._v("\n        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("rotate_horizontal"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("rotate_vertical"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If process_mouse isn't called every frame, these values")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// will not get set to zero, and the camera will rotate")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// when moving in a non cardinal direction.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Keep the camera's angle from going too high/low.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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            camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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            camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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("h2",{attrs:{id:"cleaning-up-main-rs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-up-main-rs"}},[t._v("#")]),t._v(" Cleaning up "),n("code",[t._v("main.rs")])]),t._v(" "),n("p",[t._v("First things first we need to delete "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("CameraController")]),t._v(" as well as the extra "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" from "),n("code",[t._v("main.rs")]),t._v(". Once you've done that import "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("camera")]),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("p",[t._v("We need to update "),n("code",[t._v("update_view_proj")]),t._v(" to use our new "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),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    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),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("update_view_proj")]),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("mut")]),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(" camera"),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("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" projection"),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("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),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("into")]),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),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 operator"}},[t._v("*")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),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 function"}},[t._v("into")]),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("}")]),t._v("\n")])])]),n("p",[t._v("We need to change our "),n("code",[t._v("State")]),t._v(" to use our "),n("code",[t._v("Camera")]),t._v(", "),n("code",[t._v("CameraProjection")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(" as well. We'll also add a "),n("code",[t._v("mouse_pressed")]),t._v(" field to store whether the mouse was pressed.")]),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    camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n    projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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    camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    mouse_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),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("You'll need to import "),n("code",[t._v("winit::dpi::PhysicalPosition")]),t._v(" if you haven't already.")]),t._v(" "),n("p",[t._v("We need to update "),n("code",[t._v("new()")]),t._v(" as well.")]),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("(")]),t._v("window"),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 class-name"}},[t._v("Window")]),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        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),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 punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10.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 namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),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("90.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 namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),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("20.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        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" projection "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.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 number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),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.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4")]),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 comment"}},[t._v("// ...")]),t._v("\n\n        camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("projection"),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("// UPDATED!")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n            camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            projection"),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            camera_controller"),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            mouse_pressed"),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("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("We need to change our "),n("code",[t._v("projection")]),t._v(" in "),n("code",[t._v("resize")]),t._v(" as well.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),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("mut")]),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(" new_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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),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("p",[n("code",[t._v("input()")]),t._v(" will need to be updated as well. Up to this point we have been using "),n("code",[t._v("WindowEvent")]),t._v("s for our camera controls. While this works, it's not the best solution. The "),n("a",{attrs:{href:"https://docs.rs/winit/0.24.0/winit/event/enum.WindowEvent.html?search=#variant.CursorMoved",target:"_blank",rel:"noopener noreferrer"}},[t._v("winit docs"),n("OutboundLink")],1),t._v(" inform us that OS will often transform the data for the "),n("code",[t._v("CursorMoved")]),t._v(" event to allow effects such as cursor acceleration. Because of this, we're going to change our "),n("code",[t._v("input()")]),t._v(" function to use "),n("code",[t._v("DeviceEvent")]),t._v(" instead of "),n("code",[t._v("WindowEvent")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),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("input")]),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("mut")]),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(" event"),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 class-name"}},[t._v("DeviceEvent")]),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("bool")]),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("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Key")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                virtual_keycode"),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("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                state"),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("span",{pre:!0,attrs:{class:"token operator"}},[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("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_keyboard")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseWheel")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),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 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("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_scroll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),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 boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            button"),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("// Left Mouse Button")]),t._v("\n            state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),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(".")]),t._v("mouse_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseMotion")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta "),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("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),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("mouse_pressed "),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(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_mouse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),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("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[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    "),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("This change means will have to modify the event loop in "),n("code",[t._v("main()")]),t._v(" as well.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),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    event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),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 comment"}},[t._v("// NEW!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),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("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're not using device_id currently")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),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 comment"}},[t._v("// UPDATED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),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("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 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("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n                            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                                virtual_keycode"),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 class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),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 punctuation"}},[t._v("..")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),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("{")]),t._v("\n                        state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),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 class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),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 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("{")]),t._v("\n                        state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),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 operator"}},[t._v("*")]),t._v("new_inner_size"),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 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("}")]),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 comment"}},[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(")")]),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 "),n("code",[t._v("update")]),t._v(" function requires a bit more explanation. The "),n("code",[t._v("update_camera")]),t._v(" function on the "),n("code",[t._v("CameraController")]),t._v(" has a parameter "),n("code",[t._v("dt: Duration")]),t._v(" which is the delta time or time between frames. This is to help smooth out the camera movement so that it's not locked be the framerate. Currently we aren't calculating "),n("code",[t._v("dt")]),t._v(", so I decided to pass it into "),n("code",[t._v("update")]),t._v(" as a parameter.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),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("mut")]),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(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("// UPDATED!")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),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("mut")]),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("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),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("camera"),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("projection"),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 comment"}},[t._v("// ..")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While we're at it, let's use "),n("code",[t._v("dt")]),t._v(" for the light's rotation as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),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 number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("60.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),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 operator"}},[t._v("*")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("// UPDATED!")]),t._v("\n")])])]),n("p",[t._v("We still need to calculate "),n("code",[t._v("dt")]),t._v(". Let's do that in the "),n("code",[t._v("main")]),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 keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),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(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),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 operator"}},[t._v("&")]),t._v("window"),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(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),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("\n    event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),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 comment"}},[t._v("// UPDATED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),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 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(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),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(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" last_render_time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),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("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("}")]),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(")")]),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("With that we should be able to move our camera wherever we want.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(248),alt:"./screenshot.png"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{247:function(t,s,a){t.exports=a.p+"assets/img/left_right_hand.ccabf5d0.gif"},248:function(t,s,a){t.exports=a.p+"assets/img/screenshot.4f5740bc.png"},327: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:"a-better-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-better-camera"}},[t._v("#")]),t._v(" A Better Camera")]),t._v(" "),n("p",[t._v("I've been putting this off for a while. Implementing a camera isn't specifically related to using WGPU properly, but it's been bugging me so let's do it.")]),t._v(" "),n("p",[n("code",[t._v("main.rs")]),t._v(" is getting a little crowded, so let's create a "),n("code",[t._v("camera.rs")]),t._v(" file to put our camera code. The first thing we're going to put in it in is some imports and our "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),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("use")]),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("event"),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("use")]),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("PhysicalPosition")]),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("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("::")])]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("consts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),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("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),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("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0001")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"the-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera"}},[t._v("#")]),t._v(" The Camera")]),t._v(" "),n("p",[t._v("Next we need create a new "),n("code",[t._v("Camera")]),t._v(" struct. We're going to be using a FPS style camera, so we'll store the position and the yaw (horizontal rotation), and pitch (vertical rotation). We'll have a "),n("code",[t._v("calc_matrix")]),t._v(" method to create our view matrix.")]),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("#[derive(Debug)]")]),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("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),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(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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    yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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    pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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("}")]),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("Camera")]),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("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 operator"}},[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 class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token 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 keyword"}},[t._v("Self")]),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(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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            yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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            pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("}")]),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("calc_matrix")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_to_rh")]),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(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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("\n                "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("cos")]),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin")]),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),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 class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),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("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"the-projection"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-projection"}},[t._v("#")]),t._v(" The Projection")]),t._v(" "),n("p",[t._v("I've decided to split the projection from the camera. The projection only really needs to change if the window resizes, so let's create a "),n("code",[t._v("Projection")]),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("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("Projection")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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    znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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"),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("Projection")]),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("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),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 punctuation"}},[t._v("(")]),t._v("\n        width"),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        height"),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        fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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        zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    "),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 keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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            fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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            znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            zfar"),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    "),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("resize")]),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("mut")]),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(" width"),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(" height"),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("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(".")]),t._v("aspect "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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    "),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("calc_matrix")]),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(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[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 constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),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("fovy"),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("aspect"),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("znear"),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("zfar"),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("On thing to note: "),n("code",[t._v("cgmath")]),t._v(" currently returns a right-handed projection matrix from the "),n("code",[t._v("perspective")]),t._v(" function. This means that the z-axis points out of the screen. If you want the z-axis to be "),n("em",[t._v("into")]),t._v(" the screen (aka. a left-handed projection matrix), you'll have to code your own.")]),t._v(" "),n("p",[t._v("You can tell the difference between a right-handed coordinate system and a left-handed one by using your hands. Point your thumb to the right. This is the x-axis. Point your pointer finger up. This is the y-axis. Extend your middle finger. This is the z-axis. On your right hand your middle finger should be pointing towards you. On your left hand it should be pointing away.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(247),alt:"./left_right_hand.gif"}})]),t._v(" "),n("h1",{attrs:{id:"the-camera-controller"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera-controller"}},[t._v("#")]),t._v(" The Camera Controller")]),t._v(" "),n("p",[t._v("Our camera is different, so we'll need a new camera controller. Add the following to "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug)]")]),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("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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    sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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"),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("CameraController")]),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("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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(" sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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 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 keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            sensitivity"),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    "),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("process_keyboard")]),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("mut")]),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(" key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),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("bool")]),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(" amount "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),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("match")]),t._v(" key "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_backward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_left "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Space")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LShift")]),t._v(" "),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_down "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[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        "),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("process_mouse")]),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("mut")]),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(" mouse_dx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dx "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dy "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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    "),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("process_scroll")]),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("mut")]),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(" delta"),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 class-name"}},[t._v("MouseScrollDelta")]),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),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 keyword"}},[t._v("match")]),t._v(" delta "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I'm assuming a line is about 100 pixels")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LineDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PixelDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scroll"),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("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),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        "),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("update_camera")]),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("mut")]),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(" camera"),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("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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 keyword"}},[t._v("let")]),t._v(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),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 comment"}},[t._v("// Move forward/backward and left/right")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin_cos")]),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(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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("yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_sin"),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("normalize")]),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(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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 operator"}},[t._v("-")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),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("normalize")]),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        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward "),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("amount_backward"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" right "),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("amount_left"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Move in/out (aka. "zoom")')]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Note: this isn't an actual zoom. The camera's position")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changes when zooming. I've added this to make it easier")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to get closer to an object you want to focus on.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin_cos")]),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(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),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("pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_sin"),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("normalize")]),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        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move up/down. Since we don't use roll, we can just")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// modify the y coordinate directly.")]),t._v("\n        camera"),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("y "),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[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("amount_down"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rotate")]),t._v("\n        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("rotate_horizontal"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("rotate_vertical"),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If process_mouse isn't called every frame, these values")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// will not get set to zero, and the camera will rotate")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// when moving in a non cardinal direction.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Keep the camera's angle from going too high/low.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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            camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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            camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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("h2",{attrs:{id:"cleaning-up-main-rs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-up-main-rs"}},[t._v("#")]),t._v(" Cleaning up "),n("code",[t._v("main.rs")])]),t._v(" "),n("p",[t._v("First things first we need to delete "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("CameraController")]),t._v(" as well as the extra "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" from "),n("code",[t._v("main.rs")]),t._v(". Once you've done that import "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("camera")]),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("p",[t._v("We need to update "),n("code",[t._v("update_view_proj")]),t._v(" to use our new "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),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    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),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("update_view_proj")]),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("mut")]),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(" camera"),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("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" projection"),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("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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 keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),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("into")]),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),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 operator"}},[t._v("*")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),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 function"}},[t._v("into")]),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("}")]),t._v("\n")])])]),n("p",[t._v("We need to change our "),n("code",[t._v("State")]),t._v(" to use our "),n("code",[t._v("Camera")]),t._v(", "),n("code",[t._v("CameraProjection")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(" as well. We'll also add a "),n("code",[t._v("mouse_pressed")]),t._v(" field to store whether the mouse was pressed.")]),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    camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n    projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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    camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    mouse_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),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("You'll need to import "),n("code",[t._v("winit::dpi::PhysicalPosition")]),t._v(" if you haven't already.")]),t._v(" "),n("p",[t._v("We need to update "),n("code",[t._v("new()")]),t._v(" as well.")]),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("(")]),t._v("window"),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 class-name"}},[t._v("Window")]),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        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),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 punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10.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 namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),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("90.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 namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),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("20.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        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" projection "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.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 number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),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.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4")]),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 comment"}},[t._v("// ...")]),t._v("\n\n        camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("projection"),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("// UPDATED!")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n            camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            projection"),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            camera_controller"),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            mouse_pressed"),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("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("We need to change our "),n("code",[t._v("projection")]),t._v(" in "),n("code",[t._v("resize")]),t._v(" as well.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),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("mut")]),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(" new_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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),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("p",[n("code",[t._v("input()")]),t._v(" will need to be updated as well. Up to this point we have been using "),n("code",[t._v("WindowEvent")]),t._v("s for our camera controls. While this works, it's not the best solution. The "),n("a",{attrs:{href:"https://docs.rs/winit/0.24.0/winit/event/enum.WindowEvent.html?search=#variant.CursorMoved",target:"_blank",rel:"noopener noreferrer"}},[t._v("winit docs"),n("OutboundLink")],1),t._v(" inform us that OS will often transform the data for the "),n("code",[t._v("CursorMoved")]),t._v(" event to allow effects such as cursor acceleration. Because of this, we're going to change our "),n("code",[t._v("input()")]),t._v(" function to use "),n("code",[t._v("DeviceEvent")]),t._v(" instead of "),n("code",[t._v("WindowEvent")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),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("input")]),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("mut")]),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(" event"),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 class-name"}},[t._v("DeviceEvent")]),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("bool")]),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("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Key")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                virtual_keycode"),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("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                state"),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("span",{pre:!0,attrs:{class:"token operator"}},[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("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_keyboard")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseWheel")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),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 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("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_scroll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),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 boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Button")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            button"),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("// Left Mouse Button")]),t._v("\n            state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),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(".")]),t._v("mouse_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseMotion")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta "),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("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),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("mouse_pressed "),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(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_mouse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),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("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[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    "),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("This change means will have to modify the event loop in "),n("code",[t._v("main()")]),t._v(" as well.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),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    event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),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 comment"}},[t._v("// NEW!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),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("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're not using device_id currently")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),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 comment"}},[t._v("// UPDATED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),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("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 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("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n                            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                                virtual_keycode"),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 class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),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 punctuation"}},[t._v("..")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),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("{")]),t._v("\n                        state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),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 class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),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 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("{")]),t._v("\n                        state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),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 operator"}},[t._v("*")]),t._v("new_inner_size"),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 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("}")]),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 comment"}},[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(")")]),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 "),n("code",[t._v("update")]),t._v(" function requires a bit more explanation. The "),n("code",[t._v("update_camera")]),t._v(" function on the "),n("code",[t._v("CameraController")]),t._v(" has a parameter "),n("code",[t._v("dt: Duration")]),t._v(" which is the delta time or time between frames. This is to help smooth out the camera movement so that it's not locked be the framerate. Currently we aren't calculating "),n("code",[t._v("dt")]),t._v(", so I decided to pass it into "),n("code",[t._v("update")]),t._v(" as a parameter.")]),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("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),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("mut")]),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(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("// UPDATED!")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),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("mut")]),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("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),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("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),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("camera"),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("projection"),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 comment"}},[t._v("// ..")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While we're at it, let's use "),n("code",[t._v("dt")]),t._v(" for the light's rotation as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),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 number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("60.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),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 operator"}},[t._v("*")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("// UPDATED!")]),t._v("\n")])])]),n("p",[t._v("We still need to calculate "),n("code",[t._v("dt")]),t._v(". Let's do that in the "),n("code",[t._v("main")]),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 keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),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(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),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 operator"}},[t._v("&")]),t._v("window"),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(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),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("\n    event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation 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 operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),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 comment"}},[t._v("// UPDATED!")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 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(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),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(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" last_render_time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),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("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("}")]),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(")")]),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("With that we should be able to move our camera wherever we want.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(248),alt:"./screenshot.png"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/assets/js/2.8d139978.js b/assets/js/2.78cf842d.js
similarity index 100%
rename from assets/js/2.8d139978.js
rename to assets/js/2.78cf842d.js
diff --git a/assets/js/app.4f7da77a.js b/assets/js/app.3b58db7b.js
similarity index 98%
rename from assets/js/app.4f7da77a.js
rename to assets/js/app.3b58db7b.js
index 088461a0..1032ae20 100644
--- a/assets/js/app.4f7da77a.js
+++ b/assets/js/app.3b58db7b.js
@@ -1,8 +1,8 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var r,a,c=t[0],u=t[1],s=t[2],f=0,l=[];f<c.length;f++)a=c[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&l.push(o[a][0]),o[a]=0;for(r in u)Object.prototype.hasOwnProperty.call(u,r)&&(e[r]=u[r]);for(p&&p(t);l.length;)l.shift()();return i.push.apply(i,s||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,a=1;a<n.length;a++){var c=n[a];0!==o[c]&&(r=!1)}r&&(i.splice(t--,1),e=u(u.s=n[0]))}return e}var r={},o={3:0},i=[];var a={};var c={183:function(){return{"./pong_bg.js":{__wbindgen_object_drop_ref:function(e){return r[156].exports.__wbindgen_object_drop_ref(e)},__wbindgen_object_clone_ref:function(e){return r[156].exports.__wbindgen_object_clone_ref(e)},__wbindgen_cb_drop:function(e){return r[156].exports.__wbindgen_cb_drop(e)},__wbindgen_string_new:function(e,t){return r[156].exports.__wbindgen_string_new(e,t)},__wbg_new_693216e109162396:function(){return r[156].exports.__wbg_new_693216e109162396()},__wbg_stack_0ddaca5d1abfb52f:function(e,t){return r[156].exports.__wbg_stack_0ddaca5d1abfb52f(e,t)},__wbg_error_09919627ac0992f5:function(e,t){return r[156].exports.__wbg_error_09919627ac0992f5(e,t)},__wbindgen_boolean_get:function(e){return r[156].exports.__wbindgen_boolean_get(e)},__wbindgen_string_get:function(e,t){return r[156].exports.__wbindgen_string_get(e,t)},__wbindgen_number_get:function(e,t){return r[156].exports.__wbindgen_number_get(e,t)},__wbindgen_number_new:function(e){return r[156].exports.__wbindgen_number_new(e)},__wbg_instanceof_WebGl2RenderingContext_56ad96bfac3f5531:function(e){return r[156].exports.__wbg_instanceof_WebGl2RenderingContext_56ad96bfac3f5531(e)},__wbg_beginQuery_6eca464c63134897:function(e,t,n){return r[156].exports.__wbg_beginQuery_6eca464c63134897(e,t,n)},__wbg_bindBufferRange_b859f0afc6778c43:function(e,t,n,o,i,a){return r[156].exports.__wbg_bindBufferRange_b859f0afc6778c43(e,t,n,o,i,a)},__wbg_bindSampler_ad3c4508c8af93e2:function(e,t,n){return r[156].exports.__wbg_bindSampler_ad3c4508c8af93e2(e,t,n)},__wbg_bindVertexArray_52b8b2f5fd93d81d:function(e,t){return r[156].exports.__wbg_bindVertexArray_52b8b2f5fd93d81d(e,t)},__wbg_blitFramebuffer_d6dafd082e3b1266:function(e,t,n,o,i,a,c,u,s,f,l){return r[156].exports.__wbg_blitFramebuffer_d6dafd082e3b1266(e,t,n,o,i,a,c,u,s,f,l)},__wbg_bufferData_43e443f819c8a238:function(e,t,n,o){return r[156].exports.__wbg_bufferData_43e443f819c8a238(e,t,n,o)},__wbg_bufferData_bba22fbe5dd1f1d6:function(e,t,n,o){return r[156].exports.__wbg_bufferData_bba22fbe5dd1f1d6(e,t,n,o)},__wbg_bufferSubData_27cef7a644910dfc:function(e,t,n,o){return r[156].exports.__wbg_bufferSubData_27cef7a644910dfc(e,t,n,o)},__wbg_clearBufferfv_670d0bcaec8aa253:function(e,t,n,o,i){return r[156].exports.__wbg_clearBufferfv_670d0bcaec8aa253(e,t,n,o,i)},__wbg_clearBufferiv_2bfc8565c8e26057:function(e,t,n,o,i){return r[156].exports.__wbg_clearBufferiv_2bfc8565c8e26057(e,t,n,o,i)},__wbg_clearBufferuiv_d5891cc30a9d5453:function(e,t,n,o,i){return r[156].exports.__wbg_clearBufferuiv_d5891cc30a9d5453(e,t,n,o,i)},__wbg_clientWaitSync_08c62d2895896259:function(e,t,n,o){return r[156].exports.__wbg_clientWaitSync_08c62d2895896259(e,t,n,o)},__wbg_compressedTexSubImage2D_f004f3c7a7718bd0:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_compressedTexSubImage2D_f004f3c7a7718bd0(e,t,n,o,i,a,c,u,s,f)},__wbg_compressedTexSubImage2D_0142b826d7709c5b:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_compressedTexSubImage2D_0142b826d7709c5b(e,t,n,o,i,a,c,u,s)},__wbg_compressedTexSubImage3D_e2a535df2aa9277d:function(e,t,n,o,i,a,c,u,s,f,l,p){return r[156].exports.__wbg_compressedTexSubImage3D_e2a535df2aa9277d(e,t,n,o,i,a,c,u,s,f,l,p)},__wbg_compressedTexSubImage3D_6f37cafcbb5b7101:function(e,t,n,o,i,a,c,u,s,f,l){return r[156].exports.__wbg_compressedTexSubImage3D_6f37cafcbb5b7101(e,t,n,o,i,a,c,u,s,f,l)},__wbg_copyBufferSubData_bb493bd9f4e48cae:function(e,t,n,o,i,a){return r[156].exports.__wbg_copyBufferSubData_bb493bd9f4e48cae(e,t,n,o,i,a)},__wbg_copyTexSubImage3D_b5b81204a7dbcd2e:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_copyTexSubImage3D_b5b81204a7dbcd2e(e,t,n,o,i,a,c,u,s,f)},__wbg_createSampler_b48a49fe620eb606:function(e){return r[156].exports.__wbg_createSampler_b48a49fe620eb606(e)},__wbg_createVertexArray_d59135c0a43c410b:function(e){return r[156].exports.__wbg_createVertexArray_d59135c0a43c410b(e)},__wbg_deleteQuery_b1f16f0fd43c084f:function(e,t){return r[156].exports.__wbg_deleteQuery_b1f16f0fd43c084f(e,t)},__wbg_deleteSampler_8955191e3f575f47:function(e,t){return r[156].exports.__wbg_deleteSampler_8955191e3f575f47(e,t)},__wbg_deleteSync_404eb77fed3f78e1:function(e,t){return r[156].exports.__wbg_deleteSync_404eb77fed3f78e1(e,t)},__wbg_deleteVertexArray_385874f9e1499a3f:function(e,t){return r[156].exports.__wbg_deleteVertexArray_385874f9e1499a3f(e,t)},__wbg_drawArraysInstanced_a302763ee5a90ec9:function(e,t,n,o,i){return r[156].exports.__wbg_drawArraysInstanced_a302763ee5a90ec9(e,t,n,o,i)},__wbg_drawBuffers_5b889400d53a3536:function(e,t){return r[156].exports.__wbg_drawBuffers_5b889400d53a3536(e,t)},__wbg_drawElementsInstanced_c138e56b91de9ba4:function(e,t,n,o,i,a){return r[156].exports.__wbg_drawElementsInstanced_c138e56b91de9ba4(e,t,n,o,i,a)},__wbg_endQuery_a0fba8426ccb2bb0:function(e,t){return r[156].exports.__wbg_endQuery_a0fba8426ccb2bb0(e,t)},__wbg_fenceSync_9b45746320921f27:function(e,t,n){return r[156].exports.__wbg_fenceSync_9b45746320921f27(e,t,n)},__wbg_framebufferTextureLayer_1559a5c26e04674d:function(e,t,n,o,i,a){return r[156].exports.__wbg_framebufferTextureLayer_1559a5c26e04674d(e,t,n,o,i,a)},__wbg_getBufferSubData_550ae28c0cd409c2:function(e,t,n,o){return r[156].exports.__wbg_getBufferSubData_550ae28c0cd409c2(e,t,n,o)},__wbg_getIndexedParameter_726be6f9bc536b10:function(e,t,n){return r[156].exports.__wbg_getIndexedParameter_726be6f9bc536b10(e,t,n)},__wbg_getQueryParameter_4173d9d31586a42c:function(e,t,n){return r[156].exports.__wbg_getQueryParameter_4173d9d31586a42c(e,t,n)},__wbg_getSyncParameter_3b6731a08678114f:function(e,t,n){return r[156].exports.__wbg_getSyncParameter_3b6731a08678114f(e,t,n)},__wbg_getUniformBlockIndex_62a27116db1de46b:function(e,t,n,o){return r[156].exports.__wbg_getUniformBlockIndex_62a27116db1de46b(e,t,n,o)},__wbg_invalidateFramebuffer_3d3baaa6aad97a5c:function(e,t,n){return r[156].exports.__wbg_invalidateFramebuffer_3d3baaa6aad97a5c(e,t,n)},__wbg_readBuffer_2da10a98c000e52d:function(e,t){return r[156].exports.__wbg_readBuffer_2da10a98c000e52d(e,t)},__wbg_readPixels_b75bfcc5818044eb:function(e,t,n,o,i,a,c,u){return r[156].exports.__wbg_readPixels_b75bfcc5818044eb(e,t,n,o,i,a,c,u)},__wbg_readPixels_30df1c427ef4b21f:function(e,t,n,o,i,a,c,u){return r[156].exports.__wbg_readPixels_30df1c427ef4b21f(e,t,n,o,i,a,c,u)},__wbg_renderbufferStorageMultisample_41916a754c02df64:function(e,t,n,o,i,a){return r[156].exports.__wbg_renderbufferStorageMultisample_41916a754c02df64(e,t,n,o,i,a)},__wbg_samplerParameterf_1108ed614c95720c:function(e,t,n,o){return r[156].exports.__wbg_samplerParameterf_1108ed614c95720c(e,t,n,o)},__wbg_samplerParameteri_93877d3d11258844:function(e,t,n,o){return r[156].exports.__wbg_samplerParameteri_93877d3d11258844(e,t,n,o)},__wbg_texStorage2D_46acd0abc60b3422:function(e,t,n,o,i,a){return r[156].exports.__wbg_texStorage2D_46acd0abc60b3422(e,t,n,o,i,a)},__wbg_texStorage3D_23aee9c71c0f5f73:function(e,t,n,o,i,a,c){return r[156].exports.__wbg_texStorage3D_23aee9c71c0f5f73(e,t,n,o,i,a,c)},__wbg_texSubImage2D_1fadbe96ecec5229:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_texSubImage2D_1fadbe96ecec5229(e,t,n,o,i,a,c,u,s,f)},__wbg_texSubImage2D_eee3ea60432466ce:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_texSubImage2D_eee3ea60432466ce(e,t,n,o,i,a,c,u,s,f)},__wbg_texSubImage3D_2f5675ef74e4d01e:function(e,t,n,o,i,a,c,u,s,f,l,p){return r[156].exports.__wbg_texSubImage3D_2f5675ef74e4d01e(e,t,n,o,i,a,c,u,s,f,l,p)},__wbg_texSubImage3D_1256b24d4ceb2d6b:function(e,t,n,o,i,a,c,u,s,f,l,p){return r[156].exports.__wbg_texSubImage3D_1256b24d4ceb2d6b(e,t,n,o,i,a,c,u,s,f,l,p)},__wbg_uniformBlockBinding_0babeb243604c06c:function(e,t,n,o){return r[156].exports.__wbg_uniformBlockBinding_0babeb243604c06c(e,t,n,o)},__wbg_vertexAttribDivisor_8d11db24ac277254:function(e,t,n){return r[156].exports.__wbg_vertexAttribDivisor_8d11db24ac277254(e,t,n)},__wbg_vertexAttribIPointer_73546947b11b6330:function(e,t,n,o,i,a){return r[156].exports.__wbg_vertexAttribIPointer_73546947b11b6330(e,t,n,o,i,a)},__wbg_activeTexture_0092956fa2eefd8c:function(e,t){return r[156].exports.__wbg_activeTexture_0092956fa2eefd8c(e,t)},__wbg_attachShader_7faccaa7b5ac28a6:function(e,t,n){return r[156].exports.__wbg_attachShader_7faccaa7b5ac28a6(e,t,n)},__wbg_bindBuffer_4ece833dd10cac2f:function(e,t,n){return r[156].exports.__wbg_bindBuffer_4ece833dd10cac2f(e,t,n)},__wbg_bindFramebuffer_48c4bf8ff82bf7e9:function(e,t,n){return r[156].exports.__wbg_bindFramebuffer_48c4bf8ff82bf7e9(e,t,n)},__wbg_bindRenderbuffer_4a9ad1cf80580397:function(e,t,n){return r[156].exports.__wbg_bindRenderbuffer_4a9ad1cf80580397(e,t,n)},__wbg_bindTexture_9d8ed0fcd83eb0a9:function(e,t,n){return r[156].exports.__wbg_bindTexture_9d8ed0fcd83eb0a9(e,t,n)},__wbg_blendColor_c23d0906bee11d20:function(e,t,n,o,i){return r[156].exports.__wbg_blendColor_c23d0906bee11d20(e,t,n,o,i)},__wbg_blendEquation_8f565ae0c184b00c:function(e,t){return r[156].exports.__wbg_blendEquation_8f565ae0c184b00c(e,t)},__wbg_blendEquationSeparate_ab8dfb8eca834516:function(e,t,n){return r[156].exports.__wbg_blendEquationSeparate_ab8dfb8eca834516(e,t,n)},__wbg_blendFunc_b254bb91838df1dd:function(e,t,n){return r[156].exports.__wbg_blendFunc_b254bb91838df1dd(e,t,n)},__wbg_blendFuncSeparate_1d03d2ee0347dd73:function(e,t,n,o,i){return r[156].exports.__wbg_blendFuncSeparate_1d03d2ee0347dd73(e,t,n,o,i)},__wbg_colorMask_a183552692085d61:function(e,t,n,o,i){return r[156].exports.__wbg_colorMask_a183552692085d61(e,t,n,o,i)},__wbg_compileShader_dd66d66a5a6481f3:function(e,t){return r[156].exports.__wbg_compileShader_dd66d66a5a6481f3(e,t)},__wbg_copyTexSubImage2D_5710e2e22dffa4f2:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_copyTexSubImage2D_5710e2e22dffa4f2(e,t,n,o,i,a,c,u,s)},__wbg_createBuffer_5c5caa16032a81b7:function(e){return r[156].exports.__wbg_createBuffer_5c5caa16032a81b7(e)},__wbg_createFramebuffer_9818fc04b4a38c18:function(e){return r[156].exports.__wbg_createFramebuffer_9818fc04b4a38c18(e)},__wbg_createProgram_32d01a55e144b9fc:function(e){return r[156].exports.__wbg_createProgram_32d01a55e144b9fc(e)},__wbg_createRenderbuffer_d1a55ec78e26295b:function(e){return r[156].exports.__wbg_createRenderbuffer_d1a55ec78e26295b(e)},__wbg_createShader_6e8eed55567fe1a6:function(e,t){return r[156].exports.__wbg_createShader_6e8eed55567fe1a6(e,t)},__wbg_createTexture_8f31e7386e22fc37:function(e){return r[156].exports.__wbg_createTexture_8f31e7386e22fc37(e)},__wbg_cullFace_811ddac8b7ea5416:function(e,t){return r[156].exports.__wbg_cullFace_811ddac8b7ea5416(e,t)},__wbg_deleteBuffer_de80b51d8166fddb:function(e,t){return r[156].exports.__wbg_deleteBuffer_de80b51d8166fddb(e,t)},__wbg_deleteFramebuffer_5f58ccb548438c57:function(e,t){return r[156].exports.__wbg_deleteFramebuffer_5f58ccb548438c57(e,t)},__wbg_deleteProgram_3ec3c43f2cddde7f:function(e,t){return r[156].exports.__wbg_deleteProgram_3ec3c43f2cddde7f(e,t)},__wbg_deleteRenderbuffer_6372146d4689793e:function(e,t){return r[156].exports.__wbg_deleteRenderbuffer_6372146d4689793e(e,t)},__wbg_deleteShader_b4e32582cfe4e771:function(e,t){return r[156].exports.__wbg_deleteShader_b4e32582cfe4e771(e,t)},__wbg_deleteTexture_a0632c71429795ac:function(e,t){return r[156].exports.__wbg_deleteTexture_a0632c71429795ac(e,t)},__wbg_depthFunc_63af2cb1edcba36d:function(e,t){return r[156].exports.__wbg_depthFunc_63af2cb1edcba36d(e,t)},__wbg_depthMask_d79eec8e156a2cfb:function(e,t){return r[156].exports.__wbg_depthMask_d79eec8e156a2cfb(e,t)},__wbg_depthRange_2691ba0cbdc681cb:function(e,t,n){return r[156].exports.__wbg_depthRange_2691ba0cbdc681cb(e,t,n)},__wbg_disable_b05e075ae54fa448:function(e,t){return r[156].exports.__wbg_disable_b05e075ae54fa448(e,t)},__wbg_disableVertexAttribArray_748bc5b21abcb0f4:function(e,t){return r[156].exports.__wbg_disableVertexAttribArray_748bc5b21abcb0f4(e,t)},__wbg_drawArrays_5db2f4e6291f7fb2:function(e,t,n,o){return r[156].exports.__wbg_drawArrays_5db2f4e6291f7fb2(e,t,n,o)},__wbg_drawElements_a41bb53d39cd6297:function(e,t,n,o,i){return r[156].exports.__wbg_drawElements_a41bb53d39cd6297(e,t,n,o,i)},__wbg_enable_766e546395da5a5d:function(e,t){return r[156].exports.__wbg_enable_766e546395da5a5d(e,t)},__wbg_enableVertexAttribArray_91da8d3cbe0c2bbd:function(e,t){return r[156].exports.__wbg_enableVertexAttribArray_91da8d3cbe0c2bbd(e,t)},__wbg_framebufferRenderbuffer_9d619e8bf8f2aeb6:function(e,t,n,o,i){return r[156].exports.__wbg_framebufferRenderbuffer_9d619e8bf8f2aeb6(e,t,n,o,i)},__wbg_framebufferTexture2D_3da41a7f38e2c523:function(e,t,n,o,i,a){return r[156].exports.__wbg_framebufferTexture2D_3da41a7f38e2c523(e,t,n,o,i,a)},__wbg_frontFace_0b592d7c70e6473b:function(e,t){return r[156].exports.__wbg_frontFace_0b592d7c70e6473b(e,t)},__wbg_getActiveUniform_d2105fe949262ffa:function(e,t,n){return r[156].exports.__wbg_getActiveUniform_d2105fe949262ffa(e,t,n)},__wbg_getExtension_73bff3c015bacd4a:function(e,t,n){return r[156].exports.__wbg_getExtension_73bff3c015bacd4a(e,t,n)},__wbg_getParameter_e3aea13dd0a2904d:function(e,t){return r[156].exports.__wbg_getParameter_e3aea13dd0a2904d(e,t)},__wbg_getProgramInfoLog_18c849a5fa54e7b1:function(e,t,n){return r[156].exports.__wbg_getProgramInfoLog_18c849a5fa54e7b1(e,t,n)},__wbg_getProgramParameter_80edd3cfbcf7cf1d:function(e,t,n){return r[156].exports.__wbg_getProgramParameter_80edd3cfbcf7cf1d(e,t,n)},__wbg_getShaderInfoLog_ba1de20c14b6fb63:function(e,t,n){return r[156].exports.__wbg_getShaderInfoLog_ba1de20c14b6fb63(e,t,n)},__wbg_getShaderParameter_264d9ab5c13ece4d:function(e,t,n){return r[156].exports.__wbg_getShaderParameter_264d9ab5c13ece4d(e,t,n)},__wbg_getSupportedExtensions_ba08ce7d99f03cd1:function(e){return r[156].exports.__wbg_getSupportedExtensions_ba08ce7d99f03cd1(e)},__wbg_getUniformLocation_77b2d89291f84289:function(e,t,n,o){return r[156].exports.__wbg_getUniformLocation_77b2d89291f84289(e,t,n,o)},__wbg_linkProgram_b84796e37364e5c9:function(e,t){return r[156].exports.__wbg_linkProgram_b84796e37364e5c9(e,t)},__wbg_pixelStorei_a9b9b42ef01616b2:function(e,t,n){return r[156].exports.__wbg_pixelStorei_a9b9b42ef01616b2(e,t,n)},__wbg_polygonOffset_dcc750a9ce298efc:function(e,t,n){return r[156].exports.__wbg_polygonOffset_dcc750a9ce298efc(e,t,n)},__wbg_renderbufferStorage_6a62bdbe7df6b7ed:function(e,t,n,o,i){return r[156].exports.__wbg_renderbufferStorage_6a62bdbe7df6b7ed(e,t,n,o,i)},__wbg_scissor_5802aaee71f2eb0e:function(e,t,n,o,i){return r[156].exports.__wbg_scissor_5802aaee71f2eb0e(e,t,n,o,i)},__wbg_shaderSource_18f45f93c05a8311:function(e,t,n,o){return r[156].exports.__wbg_shaderSource_18f45f93c05a8311(e,t,n,o)},__wbg_stencilFuncSeparate_e0ff3858138439e3:function(e,t,n,o,i){return r[156].exports.__wbg_stencilFuncSeparate_e0ff3858138439e3(e,t,n,o,i)},__wbg_stencilMask_251b475187dff4b2:function(e,t){return r[156].exports.__wbg_stencilMask_251b475187dff4b2(e,t)},__wbg_stencilMaskSeparate_25d10c84304047bb:function(e,t,n){return r[156].exports.__wbg_stencilMaskSeparate_25d10c84304047bb(e,t,n)},__wbg_stencilOpSeparate_4533ba8d80fd712a:function(e,t,n,o,i){return r[156].exports.__wbg_stencilOpSeparate_4533ba8d80fd712a(e,t,n,o,i)},__wbg_texParameteri_c54aab65b2f8cf6d:function(e,t,n,o){return r[156].exports.__wbg_texParameteri_c54aab65b2f8cf6d(e,t,n,o)},__wbg_uniform1i_e287345af4468e22:function(e,t,n){return r[156].exports.__wbg_uniform1i_e287345af4468e22(e,t,n)},__wbg_uniform4f_e82c1eabdf1458fe:function(e,t,n,o,i,a){return r[156].exports.__wbg_uniform4f_e82c1eabdf1458fe(e,t,n,o,i,a)},__wbg_useProgram_c2fdf4a953d1128a:function(e,t){return r[156].exports.__wbg_useProgram_c2fdf4a953d1128a(e,t)},__wbg_vertexAttribPointer_76d558694fe81cd7:function(e,t,n,o,i,a,c){return r[156].exports.__wbg_vertexAttribPointer_76d558694fe81cd7(e,t,n,o,i,a,c)},__wbg_viewport_da0901eee69b9909:function(e,t,n,o,i){return r[156].exports.__wbg_viewport_da0901eee69b9909(e,t,n,o,i)},__wbg_instanceof_Window_c4b70662a0d2c5ec:function(e){return r[156].exports.__wbg_instanceof_Window_c4b70662a0d2c5ec(e)},__wbg_document_1c64944725c0d81d:function(e){return r[156].exports.__wbg_document_1c64944725c0d81d(e)},__wbg_innerWidth_ef25c730fca132cf:function(e){return r[156].exports.__wbg_innerWidth_ef25c730fca132cf(e)},__wbg_innerHeight_1b1217a63a77bf61:function(e){return r[156].exports.__wbg_innerHeight_1b1217a63a77bf61(e)},__wbg_devicePixelRatio_d8c3852bb37f76bf:function(e){return r[156].exports.__wbg_devicePixelRatio_d8c3852bb37f76bf(e)},__wbg_cancelAnimationFrame_5f2a1e987a6de100:function(e,t){return r[156].exports.__wbg_cancelAnimationFrame_5f2a1e987a6de100(e,t)},__wbg_matchMedia_b95c474c6db67a60:function(e,t,n){return r[156].exports.__wbg_matchMedia_b95c474c6db67a60(e,t,n)},__wbg_requestAnimationFrame_71638ca922068239:function(e,t){return r[156].exports.__wbg_requestAnimationFrame_71638ca922068239(e,t)},__wbg_get_001a5e5e0ebf9911:function(e,t,n){return r[156].exports.__wbg_get_001a5e5e0ebf9911(e,t,n)},__wbg_clearTimeout_2c1ba0016d8bca41:function(e,t){return r[156].exports.__wbg_clearTimeout_2c1ba0016d8bca41(e,t)},__wbg_setTimeout_df66d951b1726b78:function(e,t,n){return r[156].exports.__wbg_setTimeout_df66d951b1726b78(e,t,n)},__wbg_connect_723cc4823fe3e6c0:function(e,t){return r[156].exports.__wbg_connect_723cc4823fe3e6c0(e,t)},__wbg_target_cc69dde6c2d9ec90:function(e){return r[156].exports.__wbg_target_cc69dde6c2d9ec90(e)},__wbg_cancelBubble_f67c419013823f11:function(e){return r[156].exports.__wbg_cancelBubble_f67c419013823f11(e)},__wbg_preventDefault_9866c9fd51eecfb6:function(e){return r[156].exports.__wbg_preventDefault_9866c9fd51eecfb6(e)},__wbg_stopPropagation_ae76be6b0f664ee8:function(e){return r[156].exports.__wbg_stopPropagation_ae76be6b0f664ee8(e)},__wbg_charCode_94907480ee48e8d5:function(e){return r[156].exports.__wbg_charCode_94907480ee48e8d5(e)},__wbg_keyCode_490ed69472addfdc:function(e){return r[156].exports.__wbg_keyCode_490ed69472addfdc(e)},__wbg_altKey_3dcb50d5afbc5036:function(e){return r[156].exports.__wbg_altKey_3dcb50d5afbc5036(e)},__wbg_ctrlKey_fb62ba10b63b34a4:function(e){return r[156].exports.__wbg_ctrlKey_fb62ba10b63b34a4(e)},__wbg_shiftKey_bd2875540e5db840:function(e){return r[156].exports.__wbg_shiftKey_bd2875540e5db840(e)},__wbg_metaKey_94ca09e07f21f240:function(e){return r[156].exports.__wbg_metaKey_94ca09e07f21f240(e)},__wbg_key_10dcaa4bb6d5449f:function(e,t){return r[156].exports.__wbg_key_10dcaa4bb6d5449f(e,t)},__wbg_code_1c2fd251f38b398a:function(e,t){return r[156].exports.__wbg_code_1c2fd251f38b398a(e,t)},__wbg_getModifierState_a3918fd0a6fed13b:function(e,t,n){return r[156].exports.__wbg_getModifierState_a3918fd0a6fed13b(e,t,n)},__wbg_drawArraysInstancedANGLE_947637aa80c7e05d:function(e,t,n,o,i){return r[156].exports.__wbg_drawArraysInstancedANGLE_947637aa80c7e05d(e,t,n,o,i)},__wbg_drawElementsInstancedANGLE_7cb606c4e0d0b01b:function(e,t,n,o,i,a){return r[156].exports.__wbg_drawElementsInstancedANGLE_7cb606c4e0d0b01b(e,t,n,o,i,a)},__wbg_vertexAttribDivisorANGLE_844b4599bcb01375:function(e,t,n){return r[156].exports.__wbg_vertexAttribDivisorANGLE_844b4599bcb01375(e,t,n)},__wbg_addEventListener_52721772cc0a7f30:function(e,t,n,o){return r[156].exports.__wbg_addEventListener_52721772cc0a7f30(e,t,n,o)},__wbg_addEventListener_09e11fbf8b4b719b:function(e,t,n,o,i){return r[156].exports.__wbg_addEventListener_09e11fbf8b4b719b(e,t,n,o,i)},__wbg_removeEventListener_f2adc9b2b318de99:function(e,t,n,o){return r[156].exports.__wbg_removeEventListener_f2adc9b2b318de99(e,t,n,o)},__wbg_size_c460d27e31aa548d:function(e){return r[156].exports.__wbg_size_c460d27e31aa548d(e)},__wbg_type_723f5f330589b6a8:function(e){return r[156].exports.__wbg_type_723f5f330589b6a8(e)},__wbg_name_cca16bd39fdf3617:function(e,t){return r[156].exports.__wbg_name_cca16bd39fdf3617(e,t)},__wbg_appendChild_d318db34c4559916:function(e,t){return r[156].exports.__wbg_appendChild_d318db34c4559916(e,t)},__wbg_x_fbafdccc547c9d4b:function(e){return r[156].exports.__wbg_x_fbafdccc547c9d4b(e)},__wbg_y_6f4ed3bbef2ef02d:function(e){return r[156].exports.__wbg_y_6f4ed3bbef2ef02d(e)},__wbg_matches_76fae292b8cd60a6:function(e){return r[156].exports.__wbg_matches_76fae292b8cd60a6(e)},__wbg_addListener_c86b1137b8521593:function(e,t){return r[156].exports.__wbg_addListener_c86b1137b8521593(e,t)},__wbg_removeListener_c880bdb0d8286afd:function(e,t){return r[156].exports.__wbg_removeListener_c880bdb0d8286afd(e,t)},__wbg_setProperty_1460c660bc329763:function(e,t,n,o,i){return r[156].exports.__wbg_setProperty_1460c660bc329763(e,t,n,o,i)},__wbg_copyToChannel_b4918009bf25ac35:function(e,t,n,o){return r[156].exports.__wbg_copyToChannel_b4918009bf25ac35(e,t,n,o)},__wbg_clientX_97ff0f5c7b19e687:function(e){return r[156].exports.__wbg_clientX_97ff0f5c7b19e687(e)},__wbg_clientY_cacd4a7e44b9719b:function(e){return r[156].exports.__wbg_clientY_cacd4a7e44b9719b(e)},__wbg_offsetX_5da3ebf8a8cda8a4:function(e){return r[156].exports.__wbg_offsetX_5da3ebf8a8cda8a4(e)},__wbg_offsetY_b0edbc16723a55cb:function(e){return r[156].exports.__wbg_offsetY_b0edbc16723a55cb(e)},__wbg_ctrlKey_9761d22fa42f09c0:function(e){return r[156].exports.__wbg_ctrlKey_9761d22fa42f09c0(e)},__wbg_shiftKey_78ee0fc1aa572c2e:function(e){return r[156].exports.__wbg_shiftKey_78ee0fc1aa572c2e(e)},__wbg_altKey_8936038d973c56db:function(e){return r[156].exports.__wbg_altKey_8936038d973c56db(e)},__wbg_metaKey_e6b9e0aa35aa2974:function(e){return r[156].exports.__wbg_metaKey_e6b9e0aa35aa2974(e)},__wbg_button_a02c0467d38e8338:function(e){return r[156].exports.__wbg_button_a02c0467d38e8338(e)},__wbg_buttons_9d7b6c334f0b37de:function(e){return r[156].exports.__wbg_buttons_9d7b6c334f0b37de(e)},__wbg_movementX_06830b9b9e6b695e:function(e){return r[156].exports.__wbg_movementX_06830b9b9e6b695e(e)},__wbg_movementY_3e85d197fec41957:function(e){return r[156].exports.__wbg_movementY_3e85d197fec41957(e)},__wbg_bindVertexArrayOES_7104c80fb0d31cb0:function(e,t){return r[156].exports.__wbg_bindVertexArrayOES_7104c80fb0d31cb0(e,t)},__wbg_createVertexArrayOES_ced4f8a084b789b7:function(e){return r[156].exports.__wbg_createVertexArrayOES_ced4f8a084b789b7(e)},__wbg_deleteVertexArrayOES_82951d0fd3b32685:function(e,t){return r[156].exports.__wbg_deleteVertexArrayOES_82951d0fd3b32685(e,t)},__wbg_drawBuffersWEBGL_e0a517bf12933c96:function(e,t){return r[156].exports.__wbg_drawBuffersWEBGL_e0a517bf12933c96(e,t)},__wbg_deltaX_8cfc6cd15e97d97c:function(e){return r[156].exports.__wbg_deltaX_8cfc6cd15e97d97c(e)},__wbg_deltaY_080604c20160c0e8:function(e){return r[156].exports.__wbg_deltaY_080604c20160c0e8(e)},__wbg_deltaMode_c5ec1ee518ea0a08:function(e){return r[156].exports.__wbg_deltaMode_c5ec1ee518ea0a08(e)},__wbg_fullscreenElement_9c65b876dfef97a7:function(e){return r[156].exports.__wbg_fullscreenElement_9c65b876dfef97a7(e)},__wbg_createElement_86c152812a141a62:function(e,t,n){return r[156].exports.__wbg_createElement_86c152812a141a62(e,t,n)},__wbg_getElementById_f3e94458ce77f0d0:function(e,t,n){return r[156].exports.__wbg_getElementById_f3e94458ce77f0d0(e,t,n)},__wbg_querySelector_b92a6c73bcfe671b:function(e,t,n){return r[156].exports.__wbg_querySelector_b92a6c73bcfe671b(e,t,n)},__wbg_getBoundingClientRect_2fba0402ea2a6ec4:function(e){return r[156].exports.__wbg_getBoundingClientRect_2fba0402ea2a6ec4(e)},__wbg_requestFullscreen_03c1aaf2b58db6cb:function(e){return r[156].exports.__wbg_requestFullscreen_03c1aaf2b58db6cb(e)},__wbg_setAttribute_1b533bf07966de55:function(e,t,n,o,i){return r[156].exports.__wbg_setAttribute_1b533bf07966de55(e,t,n,o,i)},__wbg_setPointerCapture_bd3244d9f008798f:function(e,t){return r[156].exports.__wbg_setPointerCapture_bd3244d9f008798f(e,t)},__wbg_bufferData_6be9c7fd06bae799:function(e,t,n,o){return r[156].exports.__wbg_bufferData_6be9c7fd06bae799(e,t,n,o)},__wbg_bufferData_6beb22ecb30c1316:function(e,t,n,o){return r[156].exports.__wbg_bufferData_6beb22ecb30c1316(e,t,n,o)},__wbg_bufferSubData_179b18fb1177c92c:function(e,t,n,o){return r[156].exports.__wbg_bufferSubData_179b18fb1177c92c(e,t,n,o)},__wbg_compressedTexSubImage2D_1a7c534d015590be:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_compressedTexSubImage2D_1a7c534d015590be(e,t,n,o,i,a,c,u,s)},__wbg_readPixels_c01cc032308b8227:function(e,t,n,o,i,a,c,u){return r[156].exports.__wbg_readPixels_c01cc032308b8227(e,t,n,o,i,a,c,u)},__wbg_texSubImage2D_92fbae5178901892:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_texSubImage2D_92fbae5178901892(e,t,n,o,i,a,c,u,s,f)},__wbg_activeTexture_b34aca0c2110966c:function(e,t){return r[156].exports.__wbg_activeTexture_b34aca0c2110966c(e,t)},__wbg_attachShader_eaa824fd5b37a770:function(e,t,n){return r[156].exports.__wbg_attachShader_eaa824fd5b37a770(e,t,n)},__wbg_bindBuffer_2ca7e1c18819ecb2:function(e,t,n){return r[156].exports.__wbg_bindBuffer_2ca7e1c18819ecb2(e,t,n)},__wbg_bindFramebuffer_c9f468afa9d42a5f:function(e,t,n){return r[156].exports.__wbg_bindFramebuffer_c9f468afa9d42a5f(e,t,n)},__wbg_bindRenderbuffer_7b2b49f71f3eeef9:function(e,t,n){return r[156].exports.__wbg_bindRenderbuffer_7b2b49f71f3eeef9(e,t,n)},__wbg_bindTexture_edd827f3dba6038e:function(e,t,n){return r[156].exports.__wbg_bindTexture_edd827f3dba6038e(e,t,n)},__wbg_blendColor_2a9e7053c24106a2:function(e,t,n,o,i){return r[156].exports.__wbg_blendColor_2a9e7053c24106a2(e,t,n,o,i)},__wbg_blendEquation_a0d81c0d03c9d140:function(e,t){return r[156].exports.__wbg_blendEquation_a0d81c0d03c9d140(e,t)},__wbg_blendEquationSeparate_a6bd16f7ed531fb5:function(e,t,n){return r[156].exports.__wbg_blendEquationSeparate_a6bd16f7ed531fb5(e,t,n)},__wbg_blendFunc_d5ab9f0ff5a40a48:function(e,t,n){return r[156].exports.__wbg_blendFunc_d5ab9f0ff5a40a48(e,t,n)},__wbg_blendFuncSeparate_815126bb13307b97:function(e,t,n,o,i){return r[156].exports.__wbg_blendFuncSeparate_815126bb13307b97(e,t,n,o,i)},__wbg_colorMask_035708eb94fe9af8:function(e,t,n,o,i){return r[156].exports.__wbg_colorMask_035708eb94fe9af8(e,t,n,o,i)},__wbg_compileShader_8fb70a472f32552c:function(e,t){return r[156].exports.__wbg_compileShader_8fb70a472f32552c(e,t)},__wbg_copyTexSubImage2D_c9ff20fd4ccbc5f5:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_copyTexSubImage2D_c9ff20fd4ccbc5f5(e,t,n,o,i,a,c,u,s)},__wbg_createBuffer_4802e2f0e1b1acdf:function(e){return r[156].exports.__wbg_createBuffer_4802e2f0e1b1acdf(e)},__wbg_createFramebuffer_0157699cdc720b46:function(e){return r[156].exports.__wbg_createFramebuffer_0157699cdc720b46(e)},__wbg_createProgram_b1d94f4c7554d3a1:function(e){return r[156].exports.__wbg_createProgram_b1d94f4c7554d3a1(e)},__wbg_createRenderbuffer_f10d2abe2f2c5aa4:function(e){return r[156].exports.__wbg_createRenderbuffer_f10d2abe2f2c5aa4(e)},__wbg_createShader_da09e167692f0dc7:function(e,t){return r[156].exports.__wbg_createShader_da09e167692f0dc7(e,t)},__wbg_createTexture_bafc7c08393ae59d:function(e){return r[156].exports.__wbg_createTexture_bafc7c08393ae59d(e)},__wbg_cullFace_567e744e6243934e:function(e,t){return r[156].exports.__wbg_cullFace_567e744e6243934e(e,t)},__wbg_deleteBuffer_9c31f3452ba32db1:function(e,t){return r[156].exports.__wbg_deleteBuffer_9c31f3452ba32db1(e,t)},__wbg_deleteFramebuffer_0f43513bd6c6d986:function(e,t){return r[156].exports.__wbg_deleteFramebuffer_0f43513bd6c6d986(e,t)},__wbg_deleteProgram_a2c849932f79e7af:function(e,t){return r[156].exports.__wbg_deleteProgram_a2c849932f79e7af(e,t)},__wbg_deleteRenderbuffer_c623daba22fb2331:function(e,t){return r[156].exports.__wbg_deleteRenderbuffer_c623daba22fb2331(e,t)},__wbg_deleteShader_a97b67b619baa0f0:function(e,t){return r[156].exports.__wbg_deleteShader_a97b67b619baa0f0(e,t)},__wbg_deleteTexture_82d755a5ac828346:function(e,t){return r[156].exports.__wbg_deleteTexture_82d755a5ac828346(e,t)},__wbg_depthFunc_2ffde5a067fe29a4:function(e,t){return r[156].exports.__wbg_depthFunc_2ffde5a067fe29a4(e,t)},__wbg_depthMask_0a99eff2e9451e0d:function(e,t){return r[156].exports.__wbg_depthMask_0a99eff2e9451e0d(e,t)},__wbg_depthRange_a56db343def3aeaf:function(e,t,n){return r[156].exports.__wbg_depthRange_a56db343def3aeaf(e,t,n)},__wbg_disable_b07faddb7d04349f:function(e,t){return r[156].exports.__wbg_disable_b07faddb7d04349f(e,t)},__wbg_disableVertexAttribArray_c9fdabd5f12b0539:function(e,t){return r[156].exports.__wbg_disableVertexAttribArray_c9fdabd5f12b0539(e,t)},__wbg_drawArrays_deb0ae940b2e372b:function(e,t,n,o){return r[156].exports.__wbg_drawArrays_deb0ae940b2e372b(e,t,n,o)},__wbg_drawElements_8e8af4b6757fedce:function(e,t,n,o,i){return r[156].exports.__wbg_drawElements_8e8af4b6757fedce(e,t,n,o,i)},__wbg_enable_d3d210aeb08eff52:function(e,t){return r[156].exports.__wbg_enable_d3d210aeb08eff52(e,t)},__wbg_enableVertexAttribArray_d539e547495bea44:function(e,t){return r[156].exports.__wbg_enableVertexAttribArray_d539e547495bea44(e,t)},__wbg_framebufferRenderbuffer_207dd7511415a5f8:function(e,t,n,o,i){return r[156].exports.__wbg_framebufferRenderbuffer_207dd7511415a5f8(e,t,n,o,i)},__wbg_framebufferTexture2D_923c6fc6645661bc:function(e,t,n,o,i,a){return r[156].exports.__wbg_framebufferTexture2D_923c6fc6645661bc(e,t,n,o,i,a)},__wbg_frontFace_1ae0f9f988bd176a:function(e,t){return r[156].exports.__wbg_frontFace_1ae0f9f988bd176a(e,t)},__wbg_getActiveUniform_b1f4a6da3779af76:function(e,t,n){return r[156].exports.__wbg_getActiveUniform_b1f4a6da3779af76(e,t,n)},__wbg_getParameter_6412bd2d0602696d:function(e,t){return r[156].exports.__wbg_getParameter_6412bd2d0602696d(e,t)},__wbg_getProgramInfoLog_b60e82d52c200cbd:function(e,t,n){return r[156].exports.__wbg_getProgramInfoLog_b60e82d52c200cbd(e,t,n)},__wbg_getProgramParameter_229c193895936bbe:function(e,t,n){return r[156].exports.__wbg_getProgramParameter_229c193895936bbe(e,t,n)},__wbg_getShaderInfoLog_ba51160c01b98360:function(e,t,n){return r[156].exports.__wbg_getShaderInfoLog_ba51160c01b98360(e,t,n)},__wbg_getShaderParameter_dadc55c10928575d:function(e,t,n){return r[156].exports.__wbg_getShaderParameter_dadc55c10928575d(e,t,n)},__wbg_getUniformLocation_c3b3570b4632cc5c:function(e,t,n,o){return r[156].exports.__wbg_getUniformLocation_c3b3570b4632cc5c(e,t,n,o)},__wbg_linkProgram_7080c84b0233cea2:function(e,t){return r[156].exports.__wbg_linkProgram_7080c84b0233cea2(e,t)},__wbg_pixelStorei_3cd96723ae22a5c6:function(e,t,n){return r[156].exports.__wbg_pixelStorei_3cd96723ae22a5c6(e,t,n)},__wbg_polygonOffset_be19e887f6545ec7:function(e,t,n){return r[156].exports.__wbg_polygonOffset_be19e887f6545ec7(e,t,n)},__wbg_renderbufferStorage_25ffeed5caa0cc7c:function(e,t,n,o,i){return r[156].exports.__wbg_renderbufferStorage_25ffeed5caa0cc7c(e,t,n,o,i)},__wbg_scissor_35fe98c7da06091c:function(e,t,n,o,i){return r[156].exports.__wbg_scissor_35fe98c7da06091c(e,t,n,o,i)},__wbg_shaderSource_67b991301db003d0:function(e,t,n,o){return r[156].exports.__wbg_shaderSource_67b991301db003d0(e,t,n,o)},__wbg_stencilFuncSeparate_b4ca3f41b30843d7:function(e,t,n,o,i){return r[156].exports.__wbg_stencilFuncSeparate_b4ca3f41b30843d7(e,t,n,o,i)},__wbg_stencilMask_0ec7662710f598d4:function(e,t){return r[156].exports.__wbg_stencilMask_0ec7662710f598d4(e,t)},__wbg_stencilMaskSeparate_f5dcff908c81a58f:function(e,t,n){return r[156].exports.__wbg_stencilMaskSeparate_f5dcff908c81a58f(e,t,n)},__wbg_stencilOpSeparate_6aa1b90c17ae00b6:function(e,t,n,o,i){return r[156].exports.__wbg_stencilOpSeparate_6aa1b90c17ae00b6(e,t,n,o,i)},__wbg_texParameteri_bd724f6a5ad0cbbc:function(e,t,n,o){return r[156].exports.__wbg_texParameteri_bd724f6a5ad0cbbc(e,t,n,o)},__wbg_uniform1i_0811c29c0eebe191:function(e,t,n){return r[156].exports.__wbg_uniform1i_0811c29c0eebe191(e,t,n)},__wbg_uniform4f_c9cd7c0b5febd8e2:function(e,t,n,o,i,a){return r[156].exports.__wbg_uniform4f_c9cd7c0b5febd8e2(e,t,n,o,i,a)},__wbg_useProgram_b72b0bfcbc720fa9:function(e,t){return r[156].exports.__wbg_useProgram_b72b0bfcbc720fa9(e,t)},__wbg_vertexAttribPointer_b5cb524c6fe9eec8:function(e,t,n,o,i,a,c){return r[156].exports.__wbg_vertexAttribPointer_b5cb524c6fe9eec8(e,t,n,o,i,a,c)},__wbg_viewport_89af3aceb7036a2c:function(e,t,n,o,i){return r[156].exports.__wbg_viewport_89af3aceb7036a2c(e,t,n,o,i)},__wbg_debug_675b0ecb65722d2a:function(e){return r[156].exports.__wbg_debug_675b0ecb65722d2a(e)},__wbg_error_cc38ce2b4b661e1d:function(e){return r[156].exports.__wbg_error_cc38ce2b4b661e1d(e)},__wbg_error_a8f9d6c85b89d485:function(e,t){return r[156].exports.__wbg_error_a8f9d6c85b89d485(e,t)},__wbg_info_e0c9813e6fd3bdc1:function(e){return r[156].exports.__wbg_info_e0c9813e6fd3bdc1(e)},__wbg_log_3445347661d4505e:function(e){return r[156].exports.__wbg_log_3445347661d4505e(e)},__wbg_warn_5ec7c7c02d0b3841:function(e){return r[156].exports.__wbg_warn_5ec7c7c02d0b3841(e)},__wbg_style_c88e323890d3a091:function(e){return r[156].exports.__wbg_style_c88e323890d3a091(e)},__wbg_now_559193109055ebad:function(e){return r[156].exports.__wbg_now_559193109055ebad(e)},__wbg_pointerId_9302f0e125f0b48e:function(e){return r[156].exports.__wbg_pointerId_9302f0e125f0b48e(e)},__wbg_setbuffer_c643a88bac27b2bd:function(e,t){return r[156].exports.__wbg_setbuffer_c643a88bac27b2bd(e,t)},__wbg_setonended_6ce8715add45953e:function(e,t){return r[156].exports.__wbg_setonended_6ce8715add45953e(e,t)},__wbg_start_4442e2eb5adfa978:function(e,t){return r[156].exports.__wbg_start_4442e2eb5adfa978(e,t)},__wbg_destination_6c3ac66ee8b2fe85:function(e){return r[156].exports.__wbg_destination_6c3ac66ee8b2fe85(e)},__wbg_currentTime_e231c76a3c011126:function(e){return r[156].exports.__wbg_currentTime_e231c76a3c011126(e)},__wbg_newwithcontextoptions_132e74471bf6a353:function(e){return r[156].exports.__wbg_newwithcontextoptions_132e74471bf6a353(e)},__wbg_close_b4dd98a580416cfb:function(e){return r[156].exports.__wbg_close_b4dd98a580416cfb(e)},__wbg_createBuffer_79833a4052d7b42a:function(e,t,n,o){return r[156].exports.__wbg_createBuffer_79833a4052d7b42a(e,t,n,o)},__wbg_createBufferSource_7244d810d62a0bed:function(e){return r[156].exports.__wbg_createBufferSource_7244d810d62a0bed(e)},__wbg_resume_ca50287e91c0323e:function(e){return r[156].exports.__wbg_resume_ca50287e91c0323e(e)},__wbg_matches_563087e3acb03caf:function(e){return r[156].exports.__wbg_matches_563087e3acb03caf(e)},__wbg_instanceof_HtmlCanvasElement_25d964a0dde6717e:function(e){return r[156].exports.__wbg_instanceof_HtmlCanvasElement_25d964a0dde6717e(e)},__wbg_width_555f63ab09ba7d3f:function(e){return r[156].exports.__wbg_width_555f63ab09ba7d3f(e)},__wbg_setwidth_c1a7061891b71f25:function(e,t){return r[156].exports.__wbg_setwidth_c1a7061891b71f25(e,t)},__wbg_height_7153faec70fbaf7b:function(e){return r[156].exports.__wbg_height_7153faec70fbaf7b(e)},__wbg_setheight_88894b05710ff752:function(e,t){return r[156].exports.__wbg_setheight_88894b05710ff752(e,t)},__wbg_getContext_3e21e21280a332fc:function(e,t,n,o){return r[156].exports.__wbg_getContext_3e21e21280a332fc(e,t,n,o)},__wbg_get_67189fe0b323d288:function(e,t){return r[156].exports.__wbg_get_67189fe0b323d288(e,t)},__wbg_length_42e02f5a04d67464:function(e){return r[156].exports.__wbg_length_42e02f5a04d67464(e)},__wbg_new_949bbc1147195c4e:function(){return r[156].exports.__wbg_new_949bbc1147195c4e()},__wbg_newnoargs_be86524d73f67598:function(e,t){return r[156].exports.__wbg_newnoargs_be86524d73f67598(e,t)},__wbg_get_4d0f21c2f823742e:function(e,t){return r[156].exports.__wbg_get_4d0f21c2f823742e(e,t)},__wbg_call_888d259a5fefc347:function(e,t){return r[156].exports.__wbg_call_888d259a5fefc347(e,t)},__wbg_new_0b83d3df67ecb33e:function(){return r[156].exports.__wbg_new_0b83d3df67ecb33e()},__wbg_eval_a8662911f1f95234:function(e,t){return r[156].exports.__wbg_eval_a8662911f1f95234(e,t)},__wbg_of_0df8f35f9ca22da0:function(e){return r[156].exports.__wbg_of_0df8f35f9ca22da0(e)},__wbg_push_284486ca27c6aa8b:function(e,t){return r[156].exports.__wbg_push_284486ca27c6aa8b(e,t)},__wbg_is_0f5efc7977a2c50b:function(e,t){return r[156].exports.__wbg_is_0f5efc7977a2c50b(e,t)},__wbg_self_c6fbdfc2918d5e58:function(){return r[156].exports.__wbg_self_c6fbdfc2918d5e58()},__wbg_window_baec038b5ab35c54:function(){return r[156].exports.__wbg_window_baec038b5ab35c54()},__wbg_globalThis_3f735a5746d41fbd:function(){return r[156].exports.__wbg_globalThis_3f735a5746d41fbd()},__wbg_global_1bc0b39582740e95:function(){return r[156].exports.__wbg_global_1bc0b39582740e95()},__wbindgen_is_undefined:function(e){return r[156].exports.__wbindgen_is_undefined(e)},__wbg_buffer_397eaa4d72ee94dd:function(e){return r[156].exports.__wbg_buffer_397eaa4d72ee94dd(e)},__wbg_newwithbyteoffsetandlength_12c9ea92e6bd82ab:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_12c9ea92e6bd82ab(e,t,n)},__wbg_newwithbyteoffsetandlength_cb1946ef06ced7aa:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_cb1946ef06ced7aa(e,t,n)},__wbg_newwithbyteoffsetandlength_c6cf704931530b90:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_c6cf704931530b90(e,t,n)},__wbg_newwithbyteoffsetandlength_4b9b8c4e3f5adbff:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_4b9b8c4e3f5adbff(e,t,n)},__wbg_newwithbyteoffsetandlength_63181699967b1b75:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_63181699967b1b75(e,t,n)},__wbg_newwithbyteoffsetandlength_4bc6fc57887d7f72:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_4bc6fc57887d7f72(e,t,n)},__wbg_newwithbyteoffsetandlength_8bd669b4092b7244:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_8bd669b4092b7244(e,t,n)},__wbg_set_82a4e8a85e31ac42:function(e,t,n){return r[156].exports.__wbg_set_82a4e8a85e31ac42(e,t,n)},__wbindgen_debug_string:function(e,t){return r[156].exports.__wbindgen_debug_string(e,t)},__wbindgen_throw:function(e,t){return r[156].exports.__wbindgen_throw(e,t)},__wbindgen_memory:function(){return r[156].exports.__wbindgen_memory()},__wbindgen_closure_wrapper546:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper546(e,t,n)},__wbindgen_closure_wrapper548:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper548(e,t,n)},__wbindgen_closure_wrapper550:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper550(e,t,n)},__wbindgen_closure_wrapper552:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper552(e,t,n)},__wbindgen_closure_wrapper554:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper554(e,t,n)},__wbindgen_closure_wrapper556:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper556(e,t,n)},__wbindgen_closure_wrapper558:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper558(e,t,n)},__wbindgen_closure_wrapper560:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper560(e,t,n)},__wbindgen_closure_wrapper562:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper562(e,t,n)},__wbindgen_closure_wrapper1094:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper1094(e,t,n)}}}}};function u(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,u),n.l=!0,n.exports}u.e=function(e){var t=[],n=o[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,r){n=o[e]=[t,r]}));t.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,u.nc&&s.setAttribute("nonce",u.nc),s.src=function(e){return u.p+"assets/js/"+({}[e]||e)+"."+{1:"e1054b07",2:"8d139978",4:"c4741047",5:"fa165590",6:"5bff8dca",7:"9e1be960",8:"b80b1345",9:"37f85b77",10:"9b2446b9",11:"918ac8f8",12:"7e1fa0ed",13:"c591e8de",14:"6c6630a3",15:"ceea0609",16:"8b83d0ae",17:"19aa8b8d",18:"b3e867e8",19:"3043ebc3",20:"140d2648",21:"178de04f",22:"d1c5beb9",23:"ffb83767",24:"6a0d1e12",25:"5a7a1f31",26:"a5048f3d",27:"f1adef47",28:"f4a55ac6",29:"c45319b3",30:"51e45a26",31:"8816c903",32:"cc41f1b1",33:"4daba1cc",34:"d664ca20",35:"32255abc",36:"c0c5124a"}[e]+".js"}(e);var f=new Error;i=function(t){s.onerror=s.onload=null,clearTimeout(l);var n=o[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;f.message="Loading chunk "+e+" failed.\n("+r+": "+i+")",f.name="ChunkLoadError",f.type=r,f.request=i,n[1](f)}o[e]=void 0}};var l=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return({2:[183]}[e]||[]).forEach((function(e){var n=a[e];if(n)t.push(n);else{var r,o=c[e](),i=fetch(u.p+""+{183:"47536c488428e6bdf63f"}[e]+".module.wasm");if(o instanceof Promise&&"function"==typeof WebAssembly.compileStreaming)r=Promise.all([WebAssembly.compileStreaming(i),o]).then((function(e){return WebAssembly.instantiate(e[0],e[1])}));else if("function"==typeof WebAssembly.instantiateStreaming)r=WebAssembly.instantiateStreaming(i,o);else{r=i.then((function(e){return e.arrayBuffer()})).then((function(e){return WebAssembly.instantiate(e,o)}))}t.push(a[e]=r.then((function(t){return u.w[e]=(t.instance||t).exports})))}})),Promise.all(t)},u.m=e,u.c=r,u.d=function(e,t,n){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(u.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)u.d(n,r,function(t){return e[t]}.bind(null,r));return n},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="/learn-wgpu/",u.oe=function(e){throw console.error(e),e},u.w={};var s=window.webpackJsonp=window.webpackJsonp||[],f=s.push.bind(s);s.push=t,s=s.slice();for(var l=0;l<s.length;l++)t(s[l]);var p=f;i.push([127,0]),n()}([function(e,t,n){var r=n(3),o=n(19).f,i=n(9),a=n(13),c=n(60),u=n(88),s=n(53);e.exports=function(e,t){var n,f,l,p,d,_=e.target,g=e.global,b=e.stat;if(n=g?r:b?r[_]||c(_,{}):(r[_]||{}).prototype)for(f in t){if(p=t[f],l=e.noTargetGet?(d=o(n,f))&&d.value:n[f],!s(g?f:_+(b?".":"#")+f,e.forced)&&void 0!==l){if(typeof p==typeof l)continue;u(p,l)}(e.sham||l&&l.sham)&&i(p,"sham",!0),a(n,f,p,e)}}},function(e,t,n){var r=n(3),o=n(61),i=n(5),a=n(36),c=n(63),u=n(94),s=o("wks"),f=r.Symbol,l=u?f:f&&f.withoutSetter||a;e.exports=function(e){return i(s,e)||(c&&i(f,e)?s[e]=f[e]:s[e]=l("Symbol."+e)),s[e]}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var n=function(e){return e&&e.Math==Math&&e};e.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(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t,n){var r=n(7),o=n(84),i=n(8),a=n(26),c=Object.defineProperty;t.f=r?c:function(e,t,n){if(i(e),t=a(t,!0),i(n),o)try{return c(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){var r=n(2);e.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t,n){var r=n(4);e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},function(e,t,n){var r=n(7),o=n(6),i=n(25);e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a,c){var u,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),r&&(s.functional=!0),i&&(s._scopeId="data-v-"+i),a?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},s._ssrRegister=u):o&&(u=c?function(){o.call(this,this.$root.$options.shadowRoot)}:o),u)if(s.functional){s._injectStyles=u;var f=s.render;s.render=function(e,t){return u.call(t),f(e,t)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,u):[u]}return{exports:e,options:s}}n.d(t,"a",(function(){return r}))},function(e,t,n){var r=n(31),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},function(e,t,n){var r=n(16);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(3),o=n(9),i=n(5),a=n(60),c=n(86),u=n(24),s=u.get,f=u.enforce,l=String(String).split("String");(e.exports=function(e,t,n,c){var u=!!c&&!!c.unsafe,s=!!c&&!!c.enumerable,p=!!c&&!!c.noTargetGet;"function"==typeof n&&("string"!=typeof t||i(n,"name")||o(n,"name",t),f(n).source=l.join("string"==typeof t?t:"")),e!==r?(u?!p&&e[t]&&(s=!0):delete e[t],s?e[t]=n:o(e,t,n)):s?e[t]=n:a(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&s(this).source||c(this)}))},function(e,t,n){var r=n(52),o=n(16);e.exports=function(e){return r(o(e))}},function(e,t,n){var r=n(7),o=n(2),i=n(5),a=Object.defineProperty,c={},u=function(e){throw e};e.exports=function(e,t){if(i(c,e))return c[e];t||(t={});var n=[][e],s=!!i(t,"ACCESSORS")&&t.ACCESSORS,f=i(t,0)?t[0]:u,l=i(t,1)?t[1]:void 0;return c[e]=!!n&&!o((function(){if(s&&!r)return!0;var e={length:-1};s?a(e,1,{enumerable:!0,get:u}):e[1]=1,n.call(e,f,l)}))}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,n){var r=n(64),o=n(13),i=n(129);r||o(Object.prototype,"toString",i,{unsafe:!0})},function(e,t,n){"use strict";var r=n(0),o=n(22).filter,i=n(39),a=n(15),c=i("filter"),u=a("filter");r({target:"Array",proto:!0,forced:!c||!u},{filter:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}})},function(e,t,n){var r=n(7),o=n(83),i=n(25),a=n(14),c=n(26),u=n(5),s=n(84),f=Object.getOwnPropertyDescriptor;t.f=r?f:function(e,t){if(e=a(e),t=c(t,!0),s)try{return f(e,t)}catch(e){}if(u(e,t))return i(!o.f.call(e,t),e[t])}},function(e,t,n){var r,o=n(8),i=n(131),a=n(62),c=n(28),u=n(132),s=n(85),f=n(38),l=f("IE_PROTO"),p=function(){},d=function(e){return"<script>"+e+"<\/script>"},_=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(e){}var e,t;_=r?function(e){e.write(d("")),e.close();var t=e.parentWindow.Object;return e=null,t}(r):((t=s("iframe")).style.display="none",u.appendChild(t),t.src=String("javascript:"),(e=t.contentWindow.document).open(),e.write(d("document.F=Object")),e.close(),e.F);for(var n=a.length;n--;)delete _.prototype[a[n]];return _()};c[l]=!0,e.exports=Object.create||function(e,t){var n;return null!==e?(p.prototype=o(e),n=new p,p.prototype=null,n[l]=e):n=_(),void 0===t?n:i(n,t)}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var r=n(54),o=n(52),i=n(12),a=n(11),c=n(93),u=[].push,s=function(e){var t=1==e,n=2==e,s=3==e,f=4==e,l=6==e,p=5==e||l;return function(d,_,g,b){for(var h,m,v=i(d),y=o(v),w=r(_,g,3),x=a(y.length),S=0,E=b||c,A=t?E(d,x):n?E(d,0):void 0;x>S;S++)if((p||S in y)&&(m=w(h=y[S],S,v),e))if(t)A[S]=m;else if(m)switch(e){case 3:return!0;case 5:return h;case 6:return S;case 2:u.call(A,h)}else if(f)return!1;return l?-1:s||f?f:A}};e.exports={forEach:s(0),map:s(1),filter:s(2),some:s(3),every:s(4),find:s(5),findIndex:s(6)}},function(e,t,n){"use strict";var r=n(0),o=n(58);r({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(e,t,n){var r,o,i,a=n(128),c=n(3),u=n(4),s=n(9),f=n(5),l=n(38),p=n(28),d=c.WeakMap;if(a){var _=new d,g=_.get,b=_.has,h=_.set;r=function(e,t){return h.call(_,e,t),t},o=function(e){return g.call(_,e)||{}},i=function(e){return b.call(_,e)}}else{var m=l("state");p[m]=!0,r=function(e,t){return s(e,m,t),t},o=function(e){return f(e,m)?e[m]:{}},i=function(e){return f(e,m)}}e.exports={set:r,get:o,has:i,enforce:function(e){return i(e)?o(e):r(e,{})},getterFor:function(e){return function(t){var n;if(!u(t)||(n=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var r=n(4);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=!1},function(e,t){e.exports={}},function(e,t,n){var r=n(90),o=n(3),i=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?i(r[e])||i(o[e]):r[e]&&r[e][t]||o[e]&&o[e][t]}},function(e,t){e.exports={}},function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},function(e,t,n){var r=n(91),o=n(62).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return r(e,o)}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){var n=[][e];return!!n&&r((function(){n.call(null,t||function(){throw 1},1)}))}},function(e,t,n){var r=n(21);e.exports=Array.isArray||function(e){return"Array"==r(e)}},function(e,t,n){"use strict";var r=n(0),o=n(4),i=n(34),a=n(70),c=n(11),u=n(14),s=n(55),f=n(1),l=n(39),p=n(15),d=l("slice"),_=p("slice",{ACCESSORS:!0,0:0,1:2}),g=f("species"),b=[].slice,h=Math.max;r({target:"Array",proto:!0,forced:!d||!_},{slice:function(e,t){var n,r,f,l=u(this),p=c(l.length),d=a(e,p),_=a(void 0===t?p:t,p);if(i(l)&&("function"!=typeof(n=l.constructor)||n!==Array&&!i(n.prototype)?o(n)&&null===(n=n[g])&&(n=void 0):n=void 0,n===Array||void 0===n))return b.call(l,d,_);for(r=new(void 0===n?Array:n)(h(_-d,0)),f=0;d<_;d++,f++)d in l&&s(r,f,l[d]);return r.length=f,r}})},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++n+r).toString(36)}},function(e,t,n){var r=n(6).f,o=n(5),i=n(1)("toStringTag");e.exports=function(e,t,n){e&&!o(e=n?e:e.prototype,i)&&r(e,i,{configurable:!0,value:t})}},function(e,t,n){var r=n(61),o=n(36),i=r("keys");e.exports=function(e){return i[e]||(i[e]=o(e))}},function(e,t,n){var r=n(2),o=n(1),i=n(95),a=o("species");e.exports=function(e){return i>=51||!r((function(){var t=[];return(t.constructor={})[a]=function(){return{foo:1}},1!==t[e](Boolean).foo}))}},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a){try{var c=e[i](a),u=c.value}catch(e){return void n(e)}c.done?t(u):Promise.resolve(u).then(r,o)}function o(e){return function(){var t=this,n=arguments;return new Promise((function(o,i){var a=e.apply(t,n);function c(e){r(a,o,i,c,u,"next",e)}function u(e){r(a,o,i,c,u,"throw",e)}c(void 0)}))}}n.d(t,"a",(function(){return o}))},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}n.d(t,"a",(function(){return r}))},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function o(e){return function(e){if(Array.isArray(e))return r(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e)||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(t,"a",(function(){return o}))},function(e,t){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,a=parseInt,c="object"==typeof global&&global&&global.Object===Object&&global,u="object"==typeof self&&self&&self.Object===Object&&self,s=c||u||Function("return this")(),f=Object.prototype.toString,l=Math.max,p=Math.min,d=function(){return s.Date.now()};function _(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==f.call(e)}(e))return NaN;if(_(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=_(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(n,"");var c=o.test(e);return c||i.test(e)?a(e.slice(2),c?2:8):r.test(e)?NaN:+e}e.exports=function(e,t,n){var r,o,i,a,c,u,s=0,f=!1,b=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var n=r,i=o;return r=o=void 0,s=t,a=e.apply(i,n)}function v(e){return s=e,c=setTimeout(w,t),f?m(e):a}function y(e){var n=e-u;return void 0===u||n>=t||n<0||b&&e-s>=i}function w(){var e=d();if(y(e))return x(e);c=setTimeout(w,function(e){var n=t-(e-u);return b?p(n,i-(e-s)):n}(e))}function x(e){return c=void 0,h&&r?m(e):(r=o=void 0,a)}function S(){var e=d(),n=y(e);if(r=arguments,o=this,u=e,n){if(void 0===c)return v(u);if(b)return c=setTimeout(w,t),m(u)}return void 0===c&&(c=setTimeout(w,t)),a}return t=g(t)||0,_(n)&&(f=!!n.leading,i=(b="maxWait"in n)?l(g(n.maxWait)||0,t):i,h="trailing"in n?!!n.trailing:h),S.cancel=function(){void 0!==c&&clearTimeout(c),s=0,r=u=o=c=void 0},S.flush=function(){return void 0===c?a:x(d())},S}},function(e,t,n){var r,o;
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var r,a,c=t[0],u=t[1],s=t[2],f=0,l=[];f<c.length;f++)a=c[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&l.push(o[a][0]),o[a]=0;for(r in u)Object.prototype.hasOwnProperty.call(u,r)&&(e[r]=u[r]);for(p&&p(t);l.length;)l.shift()();return i.push.apply(i,s||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,a=1;a<n.length;a++){var c=n[a];0!==o[c]&&(r=!1)}r&&(i.splice(t--,1),e=u(u.s=n[0]))}return e}var r={},o={3:0},i=[];var a={};var c={183:function(){return{"./pong_bg.js":{__wbindgen_object_drop_ref:function(e){return r[156].exports.__wbindgen_object_drop_ref(e)},__wbindgen_object_clone_ref:function(e){return r[156].exports.__wbindgen_object_clone_ref(e)},__wbindgen_cb_drop:function(e){return r[156].exports.__wbindgen_cb_drop(e)},__wbindgen_string_new:function(e,t){return r[156].exports.__wbindgen_string_new(e,t)},__wbg_new_693216e109162396:function(){return r[156].exports.__wbg_new_693216e109162396()},__wbg_stack_0ddaca5d1abfb52f:function(e,t){return r[156].exports.__wbg_stack_0ddaca5d1abfb52f(e,t)},__wbg_error_09919627ac0992f5:function(e,t){return r[156].exports.__wbg_error_09919627ac0992f5(e,t)},__wbindgen_boolean_get:function(e){return r[156].exports.__wbindgen_boolean_get(e)},__wbindgen_string_get:function(e,t){return r[156].exports.__wbindgen_string_get(e,t)},__wbindgen_number_get:function(e,t){return r[156].exports.__wbindgen_number_get(e,t)},__wbindgen_number_new:function(e){return r[156].exports.__wbindgen_number_new(e)},__wbg_instanceof_WebGl2RenderingContext_56ad96bfac3f5531:function(e){return r[156].exports.__wbg_instanceof_WebGl2RenderingContext_56ad96bfac3f5531(e)},__wbg_beginQuery_6eca464c63134897:function(e,t,n){return r[156].exports.__wbg_beginQuery_6eca464c63134897(e,t,n)},__wbg_bindBufferRange_b859f0afc6778c43:function(e,t,n,o,i,a){return r[156].exports.__wbg_bindBufferRange_b859f0afc6778c43(e,t,n,o,i,a)},__wbg_bindSampler_ad3c4508c8af93e2:function(e,t,n){return r[156].exports.__wbg_bindSampler_ad3c4508c8af93e2(e,t,n)},__wbg_bindVertexArray_52b8b2f5fd93d81d:function(e,t){return r[156].exports.__wbg_bindVertexArray_52b8b2f5fd93d81d(e,t)},__wbg_blitFramebuffer_d6dafd082e3b1266:function(e,t,n,o,i,a,c,u,s,f,l){return r[156].exports.__wbg_blitFramebuffer_d6dafd082e3b1266(e,t,n,o,i,a,c,u,s,f,l)},__wbg_bufferData_43e443f819c8a238:function(e,t,n,o){return r[156].exports.__wbg_bufferData_43e443f819c8a238(e,t,n,o)},__wbg_bufferData_bba22fbe5dd1f1d6:function(e,t,n,o){return r[156].exports.__wbg_bufferData_bba22fbe5dd1f1d6(e,t,n,o)},__wbg_bufferSubData_27cef7a644910dfc:function(e,t,n,o){return r[156].exports.__wbg_bufferSubData_27cef7a644910dfc(e,t,n,o)},__wbg_clearBufferfv_670d0bcaec8aa253:function(e,t,n,o,i){return r[156].exports.__wbg_clearBufferfv_670d0bcaec8aa253(e,t,n,o,i)},__wbg_clearBufferiv_2bfc8565c8e26057:function(e,t,n,o,i){return r[156].exports.__wbg_clearBufferiv_2bfc8565c8e26057(e,t,n,o,i)},__wbg_clearBufferuiv_d5891cc30a9d5453:function(e,t,n,o,i){return r[156].exports.__wbg_clearBufferuiv_d5891cc30a9d5453(e,t,n,o,i)},__wbg_clientWaitSync_08c62d2895896259:function(e,t,n,o){return r[156].exports.__wbg_clientWaitSync_08c62d2895896259(e,t,n,o)},__wbg_compressedTexSubImage2D_f004f3c7a7718bd0:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_compressedTexSubImage2D_f004f3c7a7718bd0(e,t,n,o,i,a,c,u,s,f)},__wbg_compressedTexSubImage2D_0142b826d7709c5b:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_compressedTexSubImage2D_0142b826d7709c5b(e,t,n,o,i,a,c,u,s)},__wbg_compressedTexSubImage3D_e2a535df2aa9277d:function(e,t,n,o,i,a,c,u,s,f,l,p){return r[156].exports.__wbg_compressedTexSubImage3D_e2a535df2aa9277d(e,t,n,o,i,a,c,u,s,f,l,p)},__wbg_compressedTexSubImage3D_6f37cafcbb5b7101:function(e,t,n,o,i,a,c,u,s,f,l){return r[156].exports.__wbg_compressedTexSubImage3D_6f37cafcbb5b7101(e,t,n,o,i,a,c,u,s,f,l)},__wbg_copyBufferSubData_bb493bd9f4e48cae:function(e,t,n,o,i,a){return r[156].exports.__wbg_copyBufferSubData_bb493bd9f4e48cae(e,t,n,o,i,a)},__wbg_copyTexSubImage3D_b5b81204a7dbcd2e:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_copyTexSubImage3D_b5b81204a7dbcd2e(e,t,n,o,i,a,c,u,s,f)},__wbg_createSampler_b48a49fe620eb606:function(e){return r[156].exports.__wbg_createSampler_b48a49fe620eb606(e)},__wbg_createVertexArray_d59135c0a43c410b:function(e){return r[156].exports.__wbg_createVertexArray_d59135c0a43c410b(e)},__wbg_deleteQuery_b1f16f0fd43c084f:function(e,t){return r[156].exports.__wbg_deleteQuery_b1f16f0fd43c084f(e,t)},__wbg_deleteSampler_8955191e3f575f47:function(e,t){return r[156].exports.__wbg_deleteSampler_8955191e3f575f47(e,t)},__wbg_deleteSync_404eb77fed3f78e1:function(e,t){return r[156].exports.__wbg_deleteSync_404eb77fed3f78e1(e,t)},__wbg_deleteVertexArray_385874f9e1499a3f:function(e,t){return r[156].exports.__wbg_deleteVertexArray_385874f9e1499a3f(e,t)},__wbg_drawArraysInstanced_a302763ee5a90ec9:function(e,t,n,o,i){return r[156].exports.__wbg_drawArraysInstanced_a302763ee5a90ec9(e,t,n,o,i)},__wbg_drawBuffers_5b889400d53a3536:function(e,t){return r[156].exports.__wbg_drawBuffers_5b889400d53a3536(e,t)},__wbg_drawElementsInstanced_c138e56b91de9ba4:function(e,t,n,o,i,a){return r[156].exports.__wbg_drawElementsInstanced_c138e56b91de9ba4(e,t,n,o,i,a)},__wbg_endQuery_a0fba8426ccb2bb0:function(e,t){return r[156].exports.__wbg_endQuery_a0fba8426ccb2bb0(e,t)},__wbg_fenceSync_9b45746320921f27:function(e,t,n){return r[156].exports.__wbg_fenceSync_9b45746320921f27(e,t,n)},__wbg_framebufferTextureLayer_1559a5c26e04674d:function(e,t,n,o,i,a){return r[156].exports.__wbg_framebufferTextureLayer_1559a5c26e04674d(e,t,n,o,i,a)},__wbg_getBufferSubData_550ae28c0cd409c2:function(e,t,n,o){return r[156].exports.__wbg_getBufferSubData_550ae28c0cd409c2(e,t,n,o)},__wbg_getIndexedParameter_726be6f9bc536b10:function(e,t,n){return r[156].exports.__wbg_getIndexedParameter_726be6f9bc536b10(e,t,n)},__wbg_getQueryParameter_4173d9d31586a42c:function(e,t,n){return r[156].exports.__wbg_getQueryParameter_4173d9d31586a42c(e,t,n)},__wbg_getSyncParameter_3b6731a08678114f:function(e,t,n){return r[156].exports.__wbg_getSyncParameter_3b6731a08678114f(e,t,n)},__wbg_getUniformBlockIndex_62a27116db1de46b:function(e,t,n,o){return r[156].exports.__wbg_getUniformBlockIndex_62a27116db1de46b(e,t,n,o)},__wbg_invalidateFramebuffer_3d3baaa6aad97a5c:function(e,t,n){return r[156].exports.__wbg_invalidateFramebuffer_3d3baaa6aad97a5c(e,t,n)},__wbg_readBuffer_2da10a98c000e52d:function(e,t){return r[156].exports.__wbg_readBuffer_2da10a98c000e52d(e,t)},__wbg_readPixels_b75bfcc5818044eb:function(e,t,n,o,i,a,c,u){return r[156].exports.__wbg_readPixels_b75bfcc5818044eb(e,t,n,o,i,a,c,u)},__wbg_readPixels_30df1c427ef4b21f:function(e,t,n,o,i,a,c,u){return r[156].exports.__wbg_readPixels_30df1c427ef4b21f(e,t,n,o,i,a,c,u)},__wbg_renderbufferStorageMultisample_41916a754c02df64:function(e,t,n,o,i,a){return r[156].exports.__wbg_renderbufferStorageMultisample_41916a754c02df64(e,t,n,o,i,a)},__wbg_samplerParameterf_1108ed614c95720c:function(e,t,n,o){return r[156].exports.__wbg_samplerParameterf_1108ed614c95720c(e,t,n,o)},__wbg_samplerParameteri_93877d3d11258844:function(e,t,n,o){return r[156].exports.__wbg_samplerParameteri_93877d3d11258844(e,t,n,o)},__wbg_texStorage2D_46acd0abc60b3422:function(e,t,n,o,i,a){return r[156].exports.__wbg_texStorage2D_46acd0abc60b3422(e,t,n,o,i,a)},__wbg_texStorage3D_23aee9c71c0f5f73:function(e,t,n,o,i,a,c){return r[156].exports.__wbg_texStorage3D_23aee9c71c0f5f73(e,t,n,o,i,a,c)},__wbg_texSubImage2D_1fadbe96ecec5229:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_texSubImage2D_1fadbe96ecec5229(e,t,n,o,i,a,c,u,s,f)},__wbg_texSubImage2D_eee3ea60432466ce:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_texSubImage2D_eee3ea60432466ce(e,t,n,o,i,a,c,u,s,f)},__wbg_texSubImage3D_2f5675ef74e4d01e:function(e,t,n,o,i,a,c,u,s,f,l,p){return r[156].exports.__wbg_texSubImage3D_2f5675ef74e4d01e(e,t,n,o,i,a,c,u,s,f,l,p)},__wbg_texSubImage3D_1256b24d4ceb2d6b:function(e,t,n,o,i,a,c,u,s,f,l,p){return r[156].exports.__wbg_texSubImage3D_1256b24d4ceb2d6b(e,t,n,o,i,a,c,u,s,f,l,p)},__wbg_uniformBlockBinding_0babeb243604c06c:function(e,t,n,o){return r[156].exports.__wbg_uniformBlockBinding_0babeb243604c06c(e,t,n,o)},__wbg_vertexAttribDivisor_8d11db24ac277254:function(e,t,n){return r[156].exports.__wbg_vertexAttribDivisor_8d11db24ac277254(e,t,n)},__wbg_vertexAttribIPointer_73546947b11b6330:function(e,t,n,o,i,a){return r[156].exports.__wbg_vertexAttribIPointer_73546947b11b6330(e,t,n,o,i,a)},__wbg_activeTexture_0092956fa2eefd8c:function(e,t){return r[156].exports.__wbg_activeTexture_0092956fa2eefd8c(e,t)},__wbg_attachShader_7faccaa7b5ac28a6:function(e,t,n){return r[156].exports.__wbg_attachShader_7faccaa7b5ac28a6(e,t,n)},__wbg_bindBuffer_4ece833dd10cac2f:function(e,t,n){return r[156].exports.__wbg_bindBuffer_4ece833dd10cac2f(e,t,n)},__wbg_bindFramebuffer_48c4bf8ff82bf7e9:function(e,t,n){return r[156].exports.__wbg_bindFramebuffer_48c4bf8ff82bf7e9(e,t,n)},__wbg_bindRenderbuffer_4a9ad1cf80580397:function(e,t,n){return r[156].exports.__wbg_bindRenderbuffer_4a9ad1cf80580397(e,t,n)},__wbg_bindTexture_9d8ed0fcd83eb0a9:function(e,t,n){return r[156].exports.__wbg_bindTexture_9d8ed0fcd83eb0a9(e,t,n)},__wbg_blendColor_c23d0906bee11d20:function(e,t,n,o,i){return r[156].exports.__wbg_blendColor_c23d0906bee11d20(e,t,n,o,i)},__wbg_blendEquation_8f565ae0c184b00c:function(e,t){return r[156].exports.__wbg_blendEquation_8f565ae0c184b00c(e,t)},__wbg_blendEquationSeparate_ab8dfb8eca834516:function(e,t,n){return r[156].exports.__wbg_blendEquationSeparate_ab8dfb8eca834516(e,t,n)},__wbg_blendFunc_b254bb91838df1dd:function(e,t,n){return r[156].exports.__wbg_blendFunc_b254bb91838df1dd(e,t,n)},__wbg_blendFuncSeparate_1d03d2ee0347dd73:function(e,t,n,o,i){return r[156].exports.__wbg_blendFuncSeparate_1d03d2ee0347dd73(e,t,n,o,i)},__wbg_colorMask_a183552692085d61:function(e,t,n,o,i){return r[156].exports.__wbg_colorMask_a183552692085d61(e,t,n,o,i)},__wbg_compileShader_dd66d66a5a6481f3:function(e,t){return r[156].exports.__wbg_compileShader_dd66d66a5a6481f3(e,t)},__wbg_copyTexSubImage2D_5710e2e22dffa4f2:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_copyTexSubImage2D_5710e2e22dffa4f2(e,t,n,o,i,a,c,u,s)},__wbg_createBuffer_5c5caa16032a81b7:function(e){return r[156].exports.__wbg_createBuffer_5c5caa16032a81b7(e)},__wbg_createFramebuffer_9818fc04b4a38c18:function(e){return r[156].exports.__wbg_createFramebuffer_9818fc04b4a38c18(e)},__wbg_createProgram_32d01a55e144b9fc:function(e){return r[156].exports.__wbg_createProgram_32d01a55e144b9fc(e)},__wbg_createRenderbuffer_d1a55ec78e26295b:function(e){return r[156].exports.__wbg_createRenderbuffer_d1a55ec78e26295b(e)},__wbg_createShader_6e8eed55567fe1a6:function(e,t){return r[156].exports.__wbg_createShader_6e8eed55567fe1a6(e,t)},__wbg_createTexture_8f31e7386e22fc37:function(e){return r[156].exports.__wbg_createTexture_8f31e7386e22fc37(e)},__wbg_cullFace_811ddac8b7ea5416:function(e,t){return r[156].exports.__wbg_cullFace_811ddac8b7ea5416(e,t)},__wbg_deleteBuffer_de80b51d8166fddb:function(e,t){return r[156].exports.__wbg_deleteBuffer_de80b51d8166fddb(e,t)},__wbg_deleteFramebuffer_5f58ccb548438c57:function(e,t){return r[156].exports.__wbg_deleteFramebuffer_5f58ccb548438c57(e,t)},__wbg_deleteProgram_3ec3c43f2cddde7f:function(e,t){return r[156].exports.__wbg_deleteProgram_3ec3c43f2cddde7f(e,t)},__wbg_deleteRenderbuffer_6372146d4689793e:function(e,t){return r[156].exports.__wbg_deleteRenderbuffer_6372146d4689793e(e,t)},__wbg_deleteShader_b4e32582cfe4e771:function(e,t){return r[156].exports.__wbg_deleteShader_b4e32582cfe4e771(e,t)},__wbg_deleteTexture_a0632c71429795ac:function(e,t){return r[156].exports.__wbg_deleteTexture_a0632c71429795ac(e,t)},__wbg_depthFunc_63af2cb1edcba36d:function(e,t){return r[156].exports.__wbg_depthFunc_63af2cb1edcba36d(e,t)},__wbg_depthMask_d79eec8e156a2cfb:function(e,t){return r[156].exports.__wbg_depthMask_d79eec8e156a2cfb(e,t)},__wbg_depthRange_2691ba0cbdc681cb:function(e,t,n){return r[156].exports.__wbg_depthRange_2691ba0cbdc681cb(e,t,n)},__wbg_disable_b05e075ae54fa448:function(e,t){return r[156].exports.__wbg_disable_b05e075ae54fa448(e,t)},__wbg_disableVertexAttribArray_748bc5b21abcb0f4:function(e,t){return r[156].exports.__wbg_disableVertexAttribArray_748bc5b21abcb0f4(e,t)},__wbg_drawArrays_5db2f4e6291f7fb2:function(e,t,n,o){return r[156].exports.__wbg_drawArrays_5db2f4e6291f7fb2(e,t,n,o)},__wbg_drawElements_a41bb53d39cd6297:function(e,t,n,o,i){return r[156].exports.__wbg_drawElements_a41bb53d39cd6297(e,t,n,o,i)},__wbg_enable_766e546395da5a5d:function(e,t){return r[156].exports.__wbg_enable_766e546395da5a5d(e,t)},__wbg_enableVertexAttribArray_91da8d3cbe0c2bbd:function(e,t){return r[156].exports.__wbg_enableVertexAttribArray_91da8d3cbe0c2bbd(e,t)},__wbg_framebufferRenderbuffer_9d619e8bf8f2aeb6:function(e,t,n,o,i){return r[156].exports.__wbg_framebufferRenderbuffer_9d619e8bf8f2aeb6(e,t,n,o,i)},__wbg_framebufferTexture2D_3da41a7f38e2c523:function(e,t,n,o,i,a){return r[156].exports.__wbg_framebufferTexture2D_3da41a7f38e2c523(e,t,n,o,i,a)},__wbg_frontFace_0b592d7c70e6473b:function(e,t){return r[156].exports.__wbg_frontFace_0b592d7c70e6473b(e,t)},__wbg_getActiveUniform_d2105fe949262ffa:function(e,t,n){return r[156].exports.__wbg_getActiveUniform_d2105fe949262ffa(e,t,n)},__wbg_getExtension_73bff3c015bacd4a:function(e,t,n){return r[156].exports.__wbg_getExtension_73bff3c015bacd4a(e,t,n)},__wbg_getParameter_e3aea13dd0a2904d:function(e,t){return r[156].exports.__wbg_getParameter_e3aea13dd0a2904d(e,t)},__wbg_getProgramInfoLog_18c849a5fa54e7b1:function(e,t,n){return r[156].exports.__wbg_getProgramInfoLog_18c849a5fa54e7b1(e,t,n)},__wbg_getProgramParameter_80edd3cfbcf7cf1d:function(e,t,n){return r[156].exports.__wbg_getProgramParameter_80edd3cfbcf7cf1d(e,t,n)},__wbg_getShaderInfoLog_ba1de20c14b6fb63:function(e,t,n){return r[156].exports.__wbg_getShaderInfoLog_ba1de20c14b6fb63(e,t,n)},__wbg_getShaderParameter_264d9ab5c13ece4d:function(e,t,n){return r[156].exports.__wbg_getShaderParameter_264d9ab5c13ece4d(e,t,n)},__wbg_getSupportedExtensions_ba08ce7d99f03cd1:function(e){return r[156].exports.__wbg_getSupportedExtensions_ba08ce7d99f03cd1(e)},__wbg_getUniformLocation_77b2d89291f84289:function(e,t,n,o){return r[156].exports.__wbg_getUniformLocation_77b2d89291f84289(e,t,n,o)},__wbg_linkProgram_b84796e37364e5c9:function(e,t){return r[156].exports.__wbg_linkProgram_b84796e37364e5c9(e,t)},__wbg_pixelStorei_a9b9b42ef01616b2:function(e,t,n){return r[156].exports.__wbg_pixelStorei_a9b9b42ef01616b2(e,t,n)},__wbg_polygonOffset_dcc750a9ce298efc:function(e,t,n){return r[156].exports.__wbg_polygonOffset_dcc750a9ce298efc(e,t,n)},__wbg_renderbufferStorage_6a62bdbe7df6b7ed:function(e,t,n,o,i){return r[156].exports.__wbg_renderbufferStorage_6a62bdbe7df6b7ed(e,t,n,o,i)},__wbg_scissor_5802aaee71f2eb0e:function(e,t,n,o,i){return r[156].exports.__wbg_scissor_5802aaee71f2eb0e(e,t,n,o,i)},__wbg_shaderSource_18f45f93c05a8311:function(e,t,n,o){return r[156].exports.__wbg_shaderSource_18f45f93c05a8311(e,t,n,o)},__wbg_stencilFuncSeparate_e0ff3858138439e3:function(e,t,n,o,i){return r[156].exports.__wbg_stencilFuncSeparate_e0ff3858138439e3(e,t,n,o,i)},__wbg_stencilMask_251b475187dff4b2:function(e,t){return r[156].exports.__wbg_stencilMask_251b475187dff4b2(e,t)},__wbg_stencilMaskSeparate_25d10c84304047bb:function(e,t,n){return r[156].exports.__wbg_stencilMaskSeparate_25d10c84304047bb(e,t,n)},__wbg_stencilOpSeparate_4533ba8d80fd712a:function(e,t,n,o,i){return r[156].exports.__wbg_stencilOpSeparate_4533ba8d80fd712a(e,t,n,o,i)},__wbg_texParameteri_c54aab65b2f8cf6d:function(e,t,n,o){return r[156].exports.__wbg_texParameteri_c54aab65b2f8cf6d(e,t,n,o)},__wbg_uniform1i_e287345af4468e22:function(e,t,n){return r[156].exports.__wbg_uniform1i_e287345af4468e22(e,t,n)},__wbg_uniform4f_e82c1eabdf1458fe:function(e,t,n,o,i,a){return r[156].exports.__wbg_uniform4f_e82c1eabdf1458fe(e,t,n,o,i,a)},__wbg_useProgram_c2fdf4a953d1128a:function(e,t){return r[156].exports.__wbg_useProgram_c2fdf4a953d1128a(e,t)},__wbg_vertexAttribPointer_76d558694fe81cd7:function(e,t,n,o,i,a,c){return r[156].exports.__wbg_vertexAttribPointer_76d558694fe81cd7(e,t,n,o,i,a,c)},__wbg_viewport_da0901eee69b9909:function(e,t,n,o,i){return r[156].exports.__wbg_viewport_da0901eee69b9909(e,t,n,o,i)},__wbg_instanceof_Window_c4b70662a0d2c5ec:function(e){return r[156].exports.__wbg_instanceof_Window_c4b70662a0d2c5ec(e)},__wbg_document_1c64944725c0d81d:function(e){return r[156].exports.__wbg_document_1c64944725c0d81d(e)},__wbg_innerWidth_ef25c730fca132cf:function(e){return r[156].exports.__wbg_innerWidth_ef25c730fca132cf(e)},__wbg_innerHeight_1b1217a63a77bf61:function(e){return r[156].exports.__wbg_innerHeight_1b1217a63a77bf61(e)},__wbg_devicePixelRatio_d8c3852bb37f76bf:function(e){return r[156].exports.__wbg_devicePixelRatio_d8c3852bb37f76bf(e)},__wbg_cancelAnimationFrame_5f2a1e987a6de100:function(e,t){return r[156].exports.__wbg_cancelAnimationFrame_5f2a1e987a6de100(e,t)},__wbg_matchMedia_b95c474c6db67a60:function(e,t,n){return r[156].exports.__wbg_matchMedia_b95c474c6db67a60(e,t,n)},__wbg_requestAnimationFrame_71638ca922068239:function(e,t){return r[156].exports.__wbg_requestAnimationFrame_71638ca922068239(e,t)},__wbg_get_001a5e5e0ebf9911:function(e,t,n){return r[156].exports.__wbg_get_001a5e5e0ebf9911(e,t,n)},__wbg_clearTimeout_2c1ba0016d8bca41:function(e,t){return r[156].exports.__wbg_clearTimeout_2c1ba0016d8bca41(e,t)},__wbg_setTimeout_df66d951b1726b78:function(e,t,n){return r[156].exports.__wbg_setTimeout_df66d951b1726b78(e,t,n)},__wbg_connect_723cc4823fe3e6c0:function(e,t){return r[156].exports.__wbg_connect_723cc4823fe3e6c0(e,t)},__wbg_target_cc69dde6c2d9ec90:function(e){return r[156].exports.__wbg_target_cc69dde6c2d9ec90(e)},__wbg_cancelBubble_f67c419013823f11:function(e){return r[156].exports.__wbg_cancelBubble_f67c419013823f11(e)},__wbg_preventDefault_9866c9fd51eecfb6:function(e){return r[156].exports.__wbg_preventDefault_9866c9fd51eecfb6(e)},__wbg_stopPropagation_ae76be6b0f664ee8:function(e){return r[156].exports.__wbg_stopPropagation_ae76be6b0f664ee8(e)},__wbg_charCode_94907480ee48e8d5:function(e){return r[156].exports.__wbg_charCode_94907480ee48e8d5(e)},__wbg_keyCode_490ed69472addfdc:function(e){return r[156].exports.__wbg_keyCode_490ed69472addfdc(e)},__wbg_altKey_3dcb50d5afbc5036:function(e){return r[156].exports.__wbg_altKey_3dcb50d5afbc5036(e)},__wbg_ctrlKey_fb62ba10b63b34a4:function(e){return r[156].exports.__wbg_ctrlKey_fb62ba10b63b34a4(e)},__wbg_shiftKey_bd2875540e5db840:function(e){return r[156].exports.__wbg_shiftKey_bd2875540e5db840(e)},__wbg_metaKey_94ca09e07f21f240:function(e){return r[156].exports.__wbg_metaKey_94ca09e07f21f240(e)},__wbg_key_10dcaa4bb6d5449f:function(e,t){return r[156].exports.__wbg_key_10dcaa4bb6d5449f(e,t)},__wbg_code_1c2fd251f38b398a:function(e,t){return r[156].exports.__wbg_code_1c2fd251f38b398a(e,t)},__wbg_getModifierState_a3918fd0a6fed13b:function(e,t,n){return r[156].exports.__wbg_getModifierState_a3918fd0a6fed13b(e,t,n)},__wbg_drawArraysInstancedANGLE_947637aa80c7e05d:function(e,t,n,o,i){return r[156].exports.__wbg_drawArraysInstancedANGLE_947637aa80c7e05d(e,t,n,o,i)},__wbg_drawElementsInstancedANGLE_7cb606c4e0d0b01b:function(e,t,n,o,i,a){return r[156].exports.__wbg_drawElementsInstancedANGLE_7cb606c4e0d0b01b(e,t,n,o,i,a)},__wbg_vertexAttribDivisorANGLE_844b4599bcb01375:function(e,t,n){return r[156].exports.__wbg_vertexAttribDivisorANGLE_844b4599bcb01375(e,t,n)},__wbg_addEventListener_52721772cc0a7f30:function(e,t,n,o){return r[156].exports.__wbg_addEventListener_52721772cc0a7f30(e,t,n,o)},__wbg_addEventListener_09e11fbf8b4b719b:function(e,t,n,o,i){return r[156].exports.__wbg_addEventListener_09e11fbf8b4b719b(e,t,n,o,i)},__wbg_removeEventListener_f2adc9b2b318de99:function(e,t,n,o){return r[156].exports.__wbg_removeEventListener_f2adc9b2b318de99(e,t,n,o)},__wbg_size_c460d27e31aa548d:function(e){return r[156].exports.__wbg_size_c460d27e31aa548d(e)},__wbg_type_723f5f330589b6a8:function(e){return r[156].exports.__wbg_type_723f5f330589b6a8(e)},__wbg_name_cca16bd39fdf3617:function(e,t){return r[156].exports.__wbg_name_cca16bd39fdf3617(e,t)},__wbg_appendChild_d318db34c4559916:function(e,t){return r[156].exports.__wbg_appendChild_d318db34c4559916(e,t)},__wbg_x_fbafdccc547c9d4b:function(e){return r[156].exports.__wbg_x_fbafdccc547c9d4b(e)},__wbg_y_6f4ed3bbef2ef02d:function(e){return r[156].exports.__wbg_y_6f4ed3bbef2ef02d(e)},__wbg_matches_76fae292b8cd60a6:function(e){return r[156].exports.__wbg_matches_76fae292b8cd60a6(e)},__wbg_addListener_c86b1137b8521593:function(e,t){return r[156].exports.__wbg_addListener_c86b1137b8521593(e,t)},__wbg_removeListener_c880bdb0d8286afd:function(e,t){return r[156].exports.__wbg_removeListener_c880bdb0d8286afd(e,t)},__wbg_setProperty_1460c660bc329763:function(e,t,n,o,i){return r[156].exports.__wbg_setProperty_1460c660bc329763(e,t,n,o,i)},__wbg_copyToChannel_b4918009bf25ac35:function(e,t,n,o){return r[156].exports.__wbg_copyToChannel_b4918009bf25ac35(e,t,n,o)},__wbg_clientX_97ff0f5c7b19e687:function(e){return r[156].exports.__wbg_clientX_97ff0f5c7b19e687(e)},__wbg_clientY_cacd4a7e44b9719b:function(e){return r[156].exports.__wbg_clientY_cacd4a7e44b9719b(e)},__wbg_offsetX_5da3ebf8a8cda8a4:function(e){return r[156].exports.__wbg_offsetX_5da3ebf8a8cda8a4(e)},__wbg_offsetY_b0edbc16723a55cb:function(e){return r[156].exports.__wbg_offsetY_b0edbc16723a55cb(e)},__wbg_ctrlKey_9761d22fa42f09c0:function(e){return r[156].exports.__wbg_ctrlKey_9761d22fa42f09c0(e)},__wbg_shiftKey_78ee0fc1aa572c2e:function(e){return r[156].exports.__wbg_shiftKey_78ee0fc1aa572c2e(e)},__wbg_altKey_8936038d973c56db:function(e){return r[156].exports.__wbg_altKey_8936038d973c56db(e)},__wbg_metaKey_e6b9e0aa35aa2974:function(e){return r[156].exports.__wbg_metaKey_e6b9e0aa35aa2974(e)},__wbg_button_a02c0467d38e8338:function(e){return r[156].exports.__wbg_button_a02c0467d38e8338(e)},__wbg_buttons_9d7b6c334f0b37de:function(e){return r[156].exports.__wbg_buttons_9d7b6c334f0b37de(e)},__wbg_movementX_06830b9b9e6b695e:function(e){return r[156].exports.__wbg_movementX_06830b9b9e6b695e(e)},__wbg_movementY_3e85d197fec41957:function(e){return r[156].exports.__wbg_movementY_3e85d197fec41957(e)},__wbg_bindVertexArrayOES_7104c80fb0d31cb0:function(e,t){return r[156].exports.__wbg_bindVertexArrayOES_7104c80fb0d31cb0(e,t)},__wbg_createVertexArrayOES_ced4f8a084b789b7:function(e){return r[156].exports.__wbg_createVertexArrayOES_ced4f8a084b789b7(e)},__wbg_deleteVertexArrayOES_82951d0fd3b32685:function(e,t){return r[156].exports.__wbg_deleteVertexArrayOES_82951d0fd3b32685(e,t)},__wbg_drawBuffersWEBGL_e0a517bf12933c96:function(e,t){return r[156].exports.__wbg_drawBuffersWEBGL_e0a517bf12933c96(e,t)},__wbg_deltaX_8cfc6cd15e97d97c:function(e){return r[156].exports.__wbg_deltaX_8cfc6cd15e97d97c(e)},__wbg_deltaY_080604c20160c0e8:function(e){return r[156].exports.__wbg_deltaY_080604c20160c0e8(e)},__wbg_deltaMode_c5ec1ee518ea0a08:function(e){return r[156].exports.__wbg_deltaMode_c5ec1ee518ea0a08(e)},__wbg_fullscreenElement_9c65b876dfef97a7:function(e){return r[156].exports.__wbg_fullscreenElement_9c65b876dfef97a7(e)},__wbg_createElement_86c152812a141a62:function(e,t,n){return r[156].exports.__wbg_createElement_86c152812a141a62(e,t,n)},__wbg_getElementById_f3e94458ce77f0d0:function(e,t,n){return r[156].exports.__wbg_getElementById_f3e94458ce77f0d0(e,t,n)},__wbg_querySelector_b92a6c73bcfe671b:function(e,t,n){return r[156].exports.__wbg_querySelector_b92a6c73bcfe671b(e,t,n)},__wbg_getBoundingClientRect_2fba0402ea2a6ec4:function(e){return r[156].exports.__wbg_getBoundingClientRect_2fba0402ea2a6ec4(e)},__wbg_requestFullscreen_03c1aaf2b58db6cb:function(e){return r[156].exports.__wbg_requestFullscreen_03c1aaf2b58db6cb(e)},__wbg_setAttribute_1b533bf07966de55:function(e,t,n,o,i){return r[156].exports.__wbg_setAttribute_1b533bf07966de55(e,t,n,o,i)},__wbg_setPointerCapture_bd3244d9f008798f:function(e,t){return r[156].exports.__wbg_setPointerCapture_bd3244d9f008798f(e,t)},__wbg_bufferData_6be9c7fd06bae799:function(e,t,n,o){return r[156].exports.__wbg_bufferData_6be9c7fd06bae799(e,t,n,o)},__wbg_bufferData_6beb22ecb30c1316:function(e,t,n,o){return r[156].exports.__wbg_bufferData_6beb22ecb30c1316(e,t,n,o)},__wbg_bufferSubData_179b18fb1177c92c:function(e,t,n,o){return r[156].exports.__wbg_bufferSubData_179b18fb1177c92c(e,t,n,o)},__wbg_compressedTexSubImage2D_1a7c534d015590be:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_compressedTexSubImage2D_1a7c534d015590be(e,t,n,o,i,a,c,u,s)},__wbg_readPixels_c01cc032308b8227:function(e,t,n,o,i,a,c,u){return r[156].exports.__wbg_readPixels_c01cc032308b8227(e,t,n,o,i,a,c,u)},__wbg_texSubImage2D_92fbae5178901892:function(e,t,n,o,i,a,c,u,s,f){return r[156].exports.__wbg_texSubImage2D_92fbae5178901892(e,t,n,o,i,a,c,u,s,f)},__wbg_activeTexture_b34aca0c2110966c:function(e,t){return r[156].exports.__wbg_activeTexture_b34aca0c2110966c(e,t)},__wbg_attachShader_eaa824fd5b37a770:function(e,t,n){return r[156].exports.__wbg_attachShader_eaa824fd5b37a770(e,t,n)},__wbg_bindBuffer_2ca7e1c18819ecb2:function(e,t,n){return r[156].exports.__wbg_bindBuffer_2ca7e1c18819ecb2(e,t,n)},__wbg_bindFramebuffer_c9f468afa9d42a5f:function(e,t,n){return r[156].exports.__wbg_bindFramebuffer_c9f468afa9d42a5f(e,t,n)},__wbg_bindRenderbuffer_7b2b49f71f3eeef9:function(e,t,n){return r[156].exports.__wbg_bindRenderbuffer_7b2b49f71f3eeef9(e,t,n)},__wbg_bindTexture_edd827f3dba6038e:function(e,t,n){return r[156].exports.__wbg_bindTexture_edd827f3dba6038e(e,t,n)},__wbg_blendColor_2a9e7053c24106a2:function(e,t,n,o,i){return r[156].exports.__wbg_blendColor_2a9e7053c24106a2(e,t,n,o,i)},__wbg_blendEquation_a0d81c0d03c9d140:function(e,t){return r[156].exports.__wbg_blendEquation_a0d81c0d03c9d140(e,t)},__wbg_blendEquationSeparate_a6bd16f7ed531fb5:function(e,t,n){return r[156].exports.__wbg_blendEquationSeparate_a6bd16f7ed531fb5(e,t,n)},__wbg_blendFunc_d5ab9f0ff5a40a48:function(e,t,n){return r[156].exports.__wbg_blendFunc_d5ab9f0ff5a40a48(e,t,n)},__wbg_blendFuncSeparate_815126bb13307b97:function(e,t,n,o,i){return r[156].exports.__wbg_blendFuncSeparate_815126bb13307b97(e,t,n,o,i)},__wbg_colorMask_035708eb94fe9af8:function(e,t,n,o,i){return r[156].exports.__wbg_colorMask_035708eb94fe9af8(e,t,n,o,i)},__wbg_compileShader_8fb70a472f32552c:function(e,t){return r[156].exports.__wbg_compileShader_8fb70a472f32552c(e,t)},__wbg_copyTexSubImage2D_c9ff20fd4ccbc5f5:function(e,t,n,o,i,a,c,u,s){return r[156].exports.__wbg_copyTexSubImage2D_c9ff20fd4ccbc5f5(e,t,n,o,i,a,c,u,s)},__wbg_createBuffer_4802e2f0e1b1acdf:function(e){return r[156].exports.__wbg_createBuffer_4802e2f0e1b1acdf(e)},__wbg_createFramebuffer_0157699cdc720b46:function(e){return r[156].exports.__wbg_createFramebuffer_0157699cdc720b46(e)},__wbg_createProgram_b1d94f4c7554d3a1:function(e){return r[156].exports.__wbg_createProgram_b1d94f4c7554d3a1(e)},__wbg_createRenderbuffer_f10d2abe2f2c5aa4:function(e){return r[156].exports.__wbg_createRenderbuffer_f10d2abe2f2c5aa4(e)},__wbg_createShader_da09e167692f0dc7:function(e,t){return r[156].exports.__wbg_createShader_da09e167692f0dc7(e,t)},__wbg_createTexture_bafc7c08393ae59d:function(e){return r[156].exports.__wbg_createTexture_bafc7c08393ae59d(e)},__wbg_cullFace_567e744e6243934e:function(e,t){return r[156].exports.__wbg_cullFace_567e744e6243934e(e,t)},__wbg_deleteBuffer_9c31f3452ba32db1:function(e,t){return r[156].exports.__wbg_deleteBuffer_9c31f3452ba32db1(e,t)},__wbg_deleteFramebuffer_0f43513bd6c6d986:function(e,t){return r[156].exports.__wbg_deleteFramebuffer_0f43513bd6c6d986(e,t)},__wbg_deleteProgram_a2c849932f79e7af:function(e,t){return r[156].exports.__wbg_deleteProgram_a2c849932f79e7af(e,t)},__wbg_deleteRenderbuffer_c623daba22fb2331:function(e,t){return r[156].exports.__wbg_deleteRenderbuffer_c623daba22fb2331(e,t)},__wbg_deleteShader_a97b67b619baa0f0:function(e,t){return r[156].exports.__wbg_deleteShader_a97b67b619baa0f0(e,t)},__wbg_deleteTexture_82d755a5ac828346:function(e,t){return r[156].exports.__wbg_deleteTexture_82d755a5ac828346(e,t)},__wbg_depthFunc_2ffde5a067fe29a4:function(e,t){return r[156].exports.__wbg_depthFunc_2ffde5a067fe29a4(e,t)},__wbg_depthMask_0a99eff2e9451e0d:function(e,t){return r[156].exports.__wbg_depthMask_0a99eff2e9451e0d(e,t)},__wbg_depthRange_a56db343def3aeaf:function(e,t,n){return r[156].exports.__wbg_depthRange_a56db343def3aeaf(e,t,n)},__wbg_disable_b07faddb7d04349f:function(e,t){return r[156].exports.__wbg_disable_b07faddb7d04349f(e,t)},__wbg_disableVertexAttribArray_c9fdabd5f12b0539:function(e,t){return r[156].exports.__wbg_disableVertexAttribArray_c9fdabd5f12b0539(e,t)},__wbg_drawArrays_deb0ae940b2e372b:function(e,t,n,o){return r[156].exports.__wbg_drawArrays_deb0ae940b2e372b(e,t,n,o)},__wbg_drawElements_8e8af4b6757fedce:function(e,t,n,o,i){return r[156].exports.__wbg_drawElements_8e8af4b6757fedce(e,t,n,o,i)},__wbg_enable_d3d210aeb08eff52:function(e,t){return r[156].exports.__wbg_enable_d3d210aeb08eff52(e,t)},__wbg_enableVertexAttribArray_d539e547495bea44:function(e,t){return r[156].exports.__wbg_enableVertexAttribArray_d539e547495bea44(e,t)},__wbg_framebufferRenderbuffer_207dd7511415a5f8:function(e,t,n,o,i){return r[156].exports.__wbg_framebufferRenderbuffer_207dd7511415a5f8(e,t,n,o,i)},__wbg_framebufferTexture2D_923c6fc6645661bc:function(e,t,n,o,i,a){return r[156].exports.__wbg_framebufferTexture2D_923c6fc6645661bc(e,t,n,o,i,a)},__wbg_frontFace_1ae0f9f988bd176a:function(e,t){return r[156].exports.__wbg_frontFace_1ae0f9f988bd176a(e,t)},__wbg_getActiveUniform_b1f4a6da3779af76:function(e,t,n){return r[156].exports.__wbg_getActiveUniform_b1f4a6da3779af76(e,t,n)},__wbg_getParameter_6412bd2d0602696d:function(e,t){return r[156].exports.__wbg_getParameter_6412bd2d0602696d(e,t)},__wbg_getProgramInfoLog_b60e82d52c200cbd:function(e,t,n){return r[156].exports.__wbg_getProgramInfoLog_b60e82d52c200cbd(e,t,n)},__wbg_getProgramParameter_229c193895936bbe:function(e,t,n){return r[156].exports.__wbg_getProgramParameter_229c193895936bbe(e,t,n)},__wbg_getShaderInfoLog_ba51160c01b98360:function(e,t,n){return r[156].exports.__wbg_getShaderInfoLog_ba51160c01b98360(e,t,n)},__wbg_getShaderParameter_dadc55c10928575d:function(e,t,n){return r[156].exports.__wbg_getShaderParameter_dadc55c10928575d(e,t,n)},__wbg_getUniformLocation_c3b3570b4632cc5c:function(e,t,n,o){return r[156].exports.__wbg_getUniformLocation_c3b3570b4632cc5c(e,t,n,o)},__wbg_linkProgram_7080c84b0233cea2:function(e,t){return r[156].exports.__wbg_linkProgram_7080c84b0233cea2(e,t)},__wbg_pixelStorei_3cd96723ae22a5c6:function(e,t,n){return r[156].exports.__wbg_pixelStorei_3cd96723ae22a5c6(e,t,n)},__wbg_polygonOffset_be19e887f6545ec7:function(e,t,n){return r[156].exports.__wbg_polygonOffset_be19e887f6545ec7(e,t,n)},__wbg_renderbufferStorage_25ffeed5caa0cc7c:function(e,t,n,o,i){return r[156].exports.__wbg_renderbufferStorage_25ffeed5caa0cc7c(e,t,n,o,i)},__wbg_scissor_35fe98c7da06091c:function(e,t,n,o,i){return r[156].exports.__wbg_scissor_35fe98c7da06091c(e,t,n,o,i)},__wbg_shaderSource_67b991301db003d0:function(e,t,n,o){return r[156].exports.__wbg_shaderSource_67b991301db003d0(e,t,n,o)},__wbg_stencilFuncSeparate_b4ca3f41b30843d7:function(e,t,n,o,i){return r[156].exports.__wbg_stencilFuncSeparate_b4ca3f41b30843d7(e,t,n,o,i)},__wbg_stencilMask_0ec7662710f598d4:function(e,t){return r[156].exports.__wbg_stencilMask_0ec7662710f598d4(e,t)},__wbg_stencilMaskSeparate_f5dcff908c81a58f:function(e,t,n){return r[156].exports.__wbg_stencilMaskSeparate_f5dcff908c81a58f(e,t,n)},__wbg_stencilOpSeparate_6aa1b90c17ae00b6:function(e,t,n,o,i){return r[156].exports.__wbg_stencilOpSeparate_6aa1b90c17ae00b6(e,t,n,o,i)},__wbg_texParameteri_bd724f6a5ad0cbbc:function(e,t,n,o){return r[156].exports.__wbg_texParameteri_bd724f6a5ad0cbbc(e,t,n,o)},__wbg_uniform1i_0811c29c0eebe191:function(e,t,n){return r[156].exports.__wbg_uniform1i_0811c29c0eebe191(e,t,n)},__wbg_uniform4f_c9cd7c0b5febd8e2:function(e,t,n,o,i,a){return r[156].exports.__wbg_uniform4f_c9cd7c0b5febd8e2(e,t,n,o,i,a)},__wbg_useProgram_b72b0bfcbc720fa9:function(e,t){return r[156].exports.__wbg_useProgram_b72b0bfcbc720fa9(e,t)},__wbg_vertexAttribPointer_b5cb524c6fe9eec8:function(e,t,n,o,i,a,c){return r[156].exports.__wbg_vertexAttribPointer_b5cb524c6fe9eec8(e,t,n,o,i,a,c)},__wbg_viewport_89af3aceb7036a2c:function(e,t,n,o,i){return r[156].exports.__wbg_viewport_89af3aceb7036a2c(e,t,n,o,i)},__wbg_debug_675b0ecb65722d2a:function(e){return r[156].exports.__wbg_debug_675b0ecb65722d2a(e)},__wbg_error_cc38ce2b4b661e1d:function(e){return r[156].exports.__wbg_error_cc38ce2b4b661e1d(e)},__wbg_error_a8f9d6c85b89d485:function(e,t){return r[156].exports.__wbg_error_a8f9d6c85b89d485(e,t)},__wbg_info_e0c9813e6fd3bdc1:function(e){return r[156].exports.__wbg_info_e0c9813e6fd3bdc1(e)},__wbg_log_3445347661d4505e:function(e){return r[156].exports.__wbg_log_3445347661d4505e(e)},__wbg_warn_5ec7c7c02d0b3841:function(e){return r[156].exports.__wbg_warn_5ec7c7c02d0b3841(e)},__wbg_style_c88e323890d3a091:function(e){return r[156].exports.__wbg_style_c88e323890d3a091(e)},__wbg_now_559193109055ebad:function(e){return r[156].exports.__wbg_now_559193109055ebad(e)},__wbg_pointerId_9302f0e125f0b48e:function(e){return r[156].exports.__wbg_pointerId_9302f0e125f0b48e(e)},__wbg_setbuffer_c643a88bac27b2bd:function(e,t){return r[156].exports.__wbg_setbuffer_c643a88bac27b2bd(e,t)},__wbg_setonended_6ce8715add45953e:function(e,t){return r[156].exports.__wbg_setonended_6ce8715add45953e(e,t)},__wbg_start_4442e2eb5adfa978:function(e,t){return r[156].exports.__wbg_start_4442e2eb5adfa978(e,t)},__wbg_destination_6c3ac66ee8b2fe85:function(e){return r[156].exports.__wbg_destination_6c3ac66ee8b2fe85(e)},__wbg_currentTime_e231c76a3c011126:function(e){return r[156].exports.__wbg_currentTime_e231c76a3c011126(e)},__wbg_newwithcontextoptions_132e74471bf6a353:function(e){return r[156].exports.__wbg_newwithcontextoptions_132e74471bf6a353(e)},__wbg_close_b4dd98a580416cfb:function(e){return r[156].exports.__wbg_close_b4dd98a580416cfb(e)},__wbg_createBuffer_79833a4052d7b42a:function(e,t,n,o){return r[156].exports.__wbg_createBuffer_79833a4052d7b42a(e,t,n,o)},__wbg_createBufferSource_7244d810d62a0bed:function(e){return r[156].exports.__wbg_createBufferSource_7244d810d62a0bed(e)},__wbg_resume_ca50287e91c0323e:function(e){return r[156].exports.__wbg_resume_ca50287e91c0323e(e)},__wbg_matches_563087e3acb03caf:function(e){return r[156].exports.__wbg_matches_563087e3acb03caf(e)},__wbg_instanceof_HtmlCanvasElement_25d964a0dde6717e:function(e){return r[156].exports.__wbg_instanceof_HtmlCanvasElement_25d964a0dde6717e(e)},__wbg_width_555f63ab09ba7d3f:function(e){return r[156].exports.__wbg_width_555f63ab09ba7d3f(e)},__wbg_setwidth_c1a7061891b71f25:function(e,t){return r[156].exports.__wbg_setwidth_c1a7061891b71f25(e,t)},__wbg_height_7153faec70fbaf7b:function(e){return r[156].exports.__wbg_height_7153faec70fbaf7b(e)},__wbg_setheight_88894b05710ff752:function(e,t){return r[156].exports.__wbg_setheight_88894b05710ff752(e,t)},__wbg_getContext_3e21e21280a332fc:function(e,t,n,o){return r[156].exports.__wbg_getContext_3e21e21280a332fc(e,t,n,o)},__wbg_get_67189fe0b323d288:function(e,t){return r[156].exports.__wbg_get_67189fe0b323d288(e,t)},__wbg_length_42e02f5a04d67464:function(e){return r[156].exports.__wbg_length_42e02f5a04d67464(e)},__wbg_new_949bbc1147195c4e:function(){return r[156].exports.__wbg_new_949bbc1147195c4e()},__wbg_newnoargs_be86524d73f67598:function(e,t){return r[156].exports.__wbg_newnoargs_be86524d73f67598(e,t)},__wbg_get_4d0f21c2f823742e:function(e,t){return r[156].exports.__wbg_get_4d0f21c2f823742e(e,t)},__wbg_call_888d259a5fefc347:function(e,t){return r[156].exports.__wbg_call_888d259a5fefc347(e,t)},__wbg_new_0b83d3df67ecb33e:function(){return r[156].exports.__wbg_new_0b83d3df67ecb33e()},__wbg_eval_a8662911f1f95234:function(e,t){return r[156].exports.__wbg_eval_a8662911f1f95234(e,t)},__wbg_of_0df8f35f9ca22da0:function(e){return r[156].exports.__wbg_of_0df8f35f9ca22da0(e)},__wbg_push_284486ca27c6aa8b:function(e,t){return r[156].exports.__wbg_push_284486ca27c6aa8b(e,t)},__wbg_is_0f5efc7977a2c50b:function(e,t){return r[156].exports.__wbg_is_0f5efc7977a2c50b(e,t)},__wbg_self_c6fbdfc2918d5e58:function(){return r[156].exports.__wbg_self_c6fbdfc2918d5e58()},__wbg_window_baec038b5ab35c54:function(){return r[156].exports.__wbg_window_baec038b5ab35c54()},__wbg_globalThis_3f735a5746d41fbd:function(){return r[156].exports.__wbg_globalThis_3f735a5746d41fbd()},__wbg_global_1bc0b39582740e95:function(){return r[156].exports.__wbg_global_1bc0b39582740e95()},__wbindgen_is_undefined:function(e){return r[156].exports.__wbindgen_is_undefined(e)},__wbg_buffer_397eaa4d72ee94dd:function(e){return r[156].exports.__wbg_buffer_397eaa4d72ee94dd(e)},__wbg_newwithbyteoffsetandlength_12c9ea92e6bd82ab:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_12c9ea92e6bd82ab(e,t,n)},__wbg_newwithbyteoffsetandlength_cb1946ef06ced7aa:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_cb1946ef06ced7aa(e,t,n)},__wbg_newwithbyteoffsetandlength_c6cf704931530b90:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_c6cf704931530b90(e,t,n)},__wbg_newwithbyteoffsetandlength_4b9b8c4e3f5adbff:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_4b9b8c4e3f5adbff(e,t,n)},__wbg_newwithbyteoffsetandlength_63181699967b1b75:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_63181699967b1b75(e,t,n)},__wbg_newwithbyteoffsetandlength_4bc6fc57887d7f72:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_4bc6fc57887d7f72(e,t,n)},__wbg_newwithbyteoffsetandlength_8bd669b4092b7244:function(e,t,n){return r[156].exports.__wbg_newwithbyteoffsetandlength_8bd669b4092b7244(e,t,n)},__wbg_set_82a4e8a85e31ac42:function(e,t,n){return r[156].exports.__wbg_set_82a4e8a85e31ac42(e,t,n)},__wbindgen_debug_string:function(e,t){return r[156].exports.__wbindgen_debug_string(e,t)},__wbindgen_throw:function(e,t){return r[156].exports.__wbindgen_throw(e,t)},__wbindgen_memory:function(){return r[156].exports.__wbindgen_memory()},__wbindgen_closure_wrapper546:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper546(e,t,n)},__wbindgen_closure_wrapper548:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper548(e,t,n)},__wbindgen_closure_wrapper550:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper550(e,t,n)},__wbindgen_closure_wrapper552:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper552(e,t,n)},__wbindgen_closure_wrapper554:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper554(e,t,n)},__wbindgen_closure_wrapper556:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper556(e,t,n)},__wbindgen_closure_wrapper558:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper558(e,t,n)},__wbindgen_closure_wrapper560:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper560(e,t,n)},__wbindgen_closure_wrapper562:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper562(e,t,n)},__wbindgen_closure_wrapper1094:function(e,t,n){return r[156].exports.__wbindgen_closure_wrapper1094(e,t,n)}}}}};function u(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,u),n.l=!0,n.exports}u.e=function(e){var t=[],n=o[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,r){n=o[e]=[t,r]}));t.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,u.nc&&s.setAttribute("nonce",u.nc),s.src=function(e){return u.p+"assets/js/"+({}[e]||e)+"."+{1:"e1054b07",2:"78cf842d",4:"c4741047",5:"fa165590",6:"5bff8dca",7:"9e1be960",8:"b80b1345",9:"37f85b77",10:"9b2446b9",11:"918ac8f8",12:"7e1fa0ed",13:"c591e8de",14:"1aaaa4a4",15:"ceea0609",16:"8b83d0ae",17:"57f53ce3",18:"b3e867e8",19:"3043ebc3",20:"140d2648",21:"178de04f",22:"d1c5beb9",23:"ffb83767",24:"6a0d1e12",25:"5a7a1f31",26:"a5048f3d",27:"f1adef47",28:"f4a55ac6",29:"c45319b3",30:"51e45a26",31:"8816c903",32:"cc41f1b1",33:"4daba1cc",34:"d664ca20",35:"32255abc",36:"c0c5124a"}[e]+".js"}(e);var f=new Error;i=function(t){s.onerror=s.onload=null,clearTimeout(l);var n=o[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;f.message="Loading chunk "+e+" failed.\n("+r+": "+i+")",f.name="ChunkLoadError",f.type=r,f.request=i,n[1](f)}o[e]=void 0}};var l=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return({2:[183]}[e]||[]).forEach((function(e){var n=a[e];if(n)t.push(n);else{var r,o=c[e](),i=fetch(u.p+""+{183:"139d0bf2a4368d53fa02"}[e]+".module.wasm");if(o instanceof Promise&&"function"==typeof WebAssembly.compileStreaming)r=Promise.all([WebAssembly.compileStreaming(i),o]).then((function(e){return WebAssembly.instantiate(e[0],e[1])}));else if("function"==typeof WebAssembly.instantiateStreaming)r=WebAssembly.instantiateStreaming(i,o);else{r=i.then((function(e){return e.arrayBuffer()})).then((function(e){return WebAssembly.instantiate(e,o)}))}t.push(a[e]=r.then((function(t){return u.w[e]=(t.instance||t).exports})))}})),Promise.all(t)},u.m=e,u.c=r,u.d=function(e,t,n){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(u.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)u.d(n,r,function(t){return e[t]}.bind(null,r));return n},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="/learn-wgpu/",u.oe=function(e){throw console.error(e),e},u.w={};var s=window.webpackJsonp=window.webpackJsonp||[],f=s.push.bind(s);s.push=t,s=s.slice();for(var l=0;l<s.length;l++)t(s[l]);var p=f;i.push([127,0]),n()}([function(e,t,n){var r=n(3),o=n(19).f,i=n(9),a=n(13),c=n(60),u=n(88),s=n(53);e.exports=function(e,t){var n,f,l,p,d,_=e.target,g=e.global,b=e.stat;if(n=g?r:b?r[_]||c(_,{}):(r[_]||{}).prototype)for(f in t){if(p=t[f],l=e.noTargetGet?(d=o(n,f))&&d.value:n[f],!s(g?f:_+(b?".":"#")+f,e.forced)&&void 0!==l){if(typeof p==typeof l)continue;u(p,l)}(e.sham||l&&l.sham)&&i(p,"sham",!0),a(n,f,p,e)}}},function(e,t,n){var r=n(3),o=n(61),i=n(5),a=n(36),c=n(63),u=n(94),s=o("wks"),f=r.Symbol,l=u?f:f&&f.withoutSetter||a;e.exports=function(e){return i(s,e)||(c&&i(f,e)?s[e]=f[e]:s[e]=l("Symbol."+e)),s[e]}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var n=function(e){return e&&e.Math==Math&&e};e.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(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t,n){var r=n(7),o=n(84),i=n(8),a=n(26),c=Object.defineProperty;t.f=r?c:function(e,t,n){if(i(e),t=a(t,!0),i(n),o)try{return c(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){var r=n(2);e.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t,n){var r=n(4);e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},function(e,t,n){var r=n(7),o=n(6),i=n(25);e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a,c){var u,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),r&&(s.functional=!0),i&&(s._scopeId="data-v-"+i),a?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},s._ssrRegister=u):o&&(u=c?function(){o.call(this,this.$root.$options.shadowRoot)}:o),u)if(s.functional){s._injectStyles=u;var f=s.render;s.render=function(e,t){return u.call(t),f(e,t)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,u):[u]}return{exports:e,options:s}}n.d(t,"a",(function(){return r}))},function(e,t,n){var r=n(31),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},function(e,t,n){var r=n(16);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(3),o=n(9),i=n(5),a=n(60),c=n(86),u=n(24),s=u.get,f=u.enforce,l=String(String).split("String");(e.exports=function(e,t,n,c){var u=!!c&&!!c.unsafe,s=!!c&&!!c.enumerable,p=!!c&&!!c.noTargetGet;"function"==typeof n&&("string"!=typeof t||i(n,"name")||o(n,"name",t),f(n).source=l.join("string"==typeof t?t:"")),e!==r?(u?!p&&e[t]&&(s=!0):delete e[t],s?e[t]=n:o(e,t,n)):s?e[t]=n:a(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&s(this).source||c(this)}))},function(e,t,n){var r=n(52),o=n(16);e.exports=function(e){return r(o(e))}},function(e,t,n){var r=n(7),o=n(2),i=n(5),a=Object.defineProperty,c={},u=function(e){throw e};e.exports=function(e,t){if(i(c,e))return c[e];t||(t={});var n=[][e],s=!!i(t,"ACCESSORS")&&t.ACCESSORS,f=i(t,0)?t[0]:u,l=i(t,1)?t[1]:void 0;return c[e]=!!n&&!o((function(){if(s&&!r)return!0;var e={length:-1};s?a(e,1,{enumerable:!0,get:u}):e[1]=1,n.call(e,f,l)}))}},function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,n){var r=n(64),o=n(13),i=n(129);r||o(Object.prototype,"toString",i,{unsafe:!0})},function(e,t,n){"use strict";var r=n(0),o=n(22).filter,i=n(39),a=n(15),c=i("filter"),u=a("filter");r({target:"Array",proto:!0,forced:!c||!u},{filter:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}})},function(e,t,n){var r=n(7),o=n(83),i=n(25),a=n(14),c=n(26),u=n(5),s=n(84),f=Object.getOwnPropertyDescriptor;t.f=r?f:function(e,t){if(e=a(e),t=c(t,!0),s)try{return f(e,t)}catch(e){}if(u(e,t))return i(!o.f.call(e,t),e[t])}},function(e,t,n){var r,o=n(8),i=n(131),a=n(62),c=n(28),u=n(132),s=n(85),f=n(38),l=f("IE_PROTO"),p=function(){},d=function(e){return"<script>"+e+"<\/script>"},_=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(e){}var e,t;_=r?function(e){e.write(d("")),e.close();var t=e.parentWindow.Object;return e=null,t}(r):((t=s("iframe")).style.display="none",u.appendChild(t),t.src=String("javascript:"),(e=t.contentWindow.document).open(),e.write(d("document.F=Object")),e.close(),e.F);for(var n=a.length;n--;)delete _.prototype[a[n]];return _()};c[l]=!0,e.exports=Object.create||function(e,t){var n;return null!==e?(p.prototype=o(e),n=new p,p.prototype=null,n[l]=e):n=_(),void 0===t?n:i(n,t)}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var r=n(54),o=n(52),i=n(12),a=n(11),c=n(93),u=[].push,s=function(e){var t=1==e,n=2==e,s=3==e,f=4==e,l=6==e,p=5==e||l;return function(d,_,g,b){for(var h,m,v=i(d),y=o(v),w=r(_,g,3),x=a(y.length),S=0,E=b||c,A=t?E(d,x):n?E(d,0):void 0;x>S;S++)if((p||S in y)&&(m=w(h=y[S],S,v),e))if(t)A[S]=m;else if(m)switch(e){case 3:return!0;case 5:return h;case 6:return S;case 2:u.call(A,h)}else if(f)return!1;return l?-1:s||f?f:A}};e.exports={forEach:s(0),map:s(1),filter:s(2),some:s(3),every:s(4),find:s(5),findIndex:s(6)}},function(e,t,n){"use strict";var r=n(0),o=n(58);r({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(e,t,n){var r,o,i,a=n(128),c=n(3),u=n(4),s=n(9),f=n(5),l=n(38),p=n(28),d=c.WeakMap;if(a){var _=new d,g=_.get,b=_.has,h=_.set;r=function(e,t){return h.call(_,e,t),t},o=function(e){return g.call(_,e)||{}},i=function(e){return b.call(_,e)}}else{var m=l("state");p[m]=!0,r=function(e,t){return s(e,m,t),t},o=function(e){return f(e,m)?e[m]:{}},i=function(e){return f(e,m)}}e.exports={set:r,get:o,has:i,enforce:function(e){return i(e)?o(e):r(e,{})},getterFor:function(e){return function(t){var n;if(!u(t)||(n=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var r=n(4);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=!1},function(e,t){e.exports={}},function(e,t,n){var r=n(90),o=n(3),i=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?i(r[e])||i(o[e]):r[e]&&r[e][t]||o[e]&&o[e][t]}},function(e,t){e.exports={}},function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},function(e,t,n){var r=n(91),o=n(62).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return r(e,o)}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){var n=[][e];return!!n&&r((function(){n.call(null,t||function(){throw 1},1)}))}},function(e,t,n){var r=n(21);e.exports=Array.isArray||function(e){return"Array"==r(e)}},function(e,t,n){"use strict";var r=n(0),o=n(4),i=n(34),a=n(70),c=n(11),u=n(14),s=n(55),f=n(1),l=n(39),p=n(15),d=l("slice"),_=p("slice",{ACCESSORS:!0,0:0,1:2}),g=f("species"),b=[].slice,h=Math.max;r({target:"Array",proto:!0,forced:!d||!_},{slice:function(e,t){var n,r,f,l=u(this),p=c(l.length),d=a(e,p),_=a(void 0===t?p:t,p);if(i(l)&&("function"!=typeof(n=l.constructor)||n!==Array&&!i(n.prototype)?o(n)&&null===(n=n[g])&&(n=void 0):n=void 0,n===Array||void 0===n))return b.call(l,d,_);for(r=new(void 0===n?Array:n)(h(_-d,0)),f=0;d<_;d++,f++)d in l&&s(r,f,l[d]);return r.length=f,r}})},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++n+r).toString(36)}},function(e,t,n){var r=n(6).f,o=n(5),i=n(1)("toStringTag");e.exports=function(e,t,n){e&&!o(e=n?e:e.prototype,i)&&r(e,i,{configurable:!0,value:t})}},function(e,t,n){var r=n(61),o=n(36),i=r("keys");e.exports=function(e){return i[e]||(i[e]=o(e))}},function(e,t,n){var r=n(2),o=n(1),i=n(95),a=o("species");e.exports=function(e){return i>=51||!r((function(){var t=[];return(t.constructor={})[a]=function(){return{foo:1}},1!==t[e](Boolean).foo}))}},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a){try{var c=e[i](a),u=c.value}catch(e){return void n(e)}c.done?t(u):Promise.resolve(u).then(r,o)}function o(e){return function(){var t=this,n=arguments;return new Promise((function(o,i){var a=e.apply(t,n);function c(e){r(a,o,i,c,u,"next",e)}function u(e){r(a,o,i,c,u,"throw",e)}c(void 0)}))}}n.d(t,"a",(function(){return o}))},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}n.d(t,"a",(function(){return r}))},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function o(e){return function(e){if(Array.isArray(e))return r(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e)||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(t,"a",(function(){return o}))},function(e,t){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,a=parseInt,c="object"==typeof global&&global&&global.Object===Object&&global,u="object"==typeof self&&self&&self.Object===Object&&self,s=c||u||Function("return this")(),f=Object.prototype.toString,l=Math.max,p=Math.min,d=function(){return s.Date.now()};function _(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==f.call(e)}(e))return NaN;if(_(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=_(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(n,"");var c=o.test(e);return c||i.test(e)?a(e.slice(2),c?2:8):r.test(e)?NaN:+e}e.exports=function(e,t,n){var r,o,i,a,c,u,s=0,f=!1,b=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var n=r,i=o;return r=o=void 0,s=t,a=e.apply(i,n)}function v(e){return s=e,c=setTimeout(w,t),f?m(e):a}function y(e){var n=e-u;return void 0===u||n>=t||n<0||b&&e-s>=i}function w(){var e=d();if(y(e))return x(e);c=setTimeout(w,function(e){var n=t-(e-u);return b?p(n,i-(e-s)):n}(e))}function x(e){return c=void 0,h&&r?m(e):(r=o=void 0,a)}function S(){var e=d(),n=y(e);if(r=arguments,o=this,u=e,n){if(void 0===c)return v(u);if(b)return c=setTimeout(w,t),m(u)}return void 0===c&&(c=setTimeout(w,t)),a}return t=g(t)||0,_(n)&&(f=!!n.leading,i=(b="maxWait"in n)?l(g(n.maxWait)||0,t):i,h="trailing"in n?!!n.trailing:h),S.cancel=function(){void 0!==c&&clearTimeout(c),s=0,r=u=o=c=void 0},S.flush=function(){return void 0===c?a:x(d())},S}},function(e,t,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 e,t,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(e,t,n){return e<t?t:e>n?n:e}function i(e){return 100*(-1+e)}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,r.minimum,1),n.status=1===e?null:e;var u=n.render(!t),s=u.querySelector(r.barSelector),f=r.speed,l=r.easing;return u.offsetWidth,a((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),c(s,function(e,t,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(e)+"%,0)"}:{"margin-left":i(e)+"%"}).transition="all "+t+"ms "+n,o}(e,f,l)),1===e?(c(u,{transition:"none",opacity:1}),u.offsetWidth,setTimeout((function(){c(u,{transition:"all "+f+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),f)}),f)):setTimeout(t,f)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");s(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var o,a=t.querySelector(r.barSelector),u=e?"-100":i(n.status||0),f=document.querySelector(r.parent);return c(a,{transition:"all 0 linear",transform:"translate3d("+u+"%,0,0)"}),r.showSpinner||(o=t.querySelector(r.spinnerSelector))&&p(o),f!=document.body&&s(f,"nprogress-custom-parent"),f.appendChild(t),t},n.remove=function(){f(document.documentElement,"nprogress-busy"),f(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&p(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var a=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),c=function(){var e=["Webkit","O","Moz","ms"],t={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()})),t[n]||(t[n]=function(t){var n=document.body.style;if(t in n)return t;for(var r,o=e.length,i=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((r=e[o]+i)in n)return r;return t}(n))}function r(e,t,r){t=n(t),e.style[t]=r}return function(e,t){var n,o,i=arguments;if(2==i.length)for(n in t)void 0!==(o=t[n])&&t.hasOwnProperty(n)&&r(e,n,o);else r(e,i[1],i[2])}}();function u(e,t){return("string"==typeof e?e:l(e)).indexOf(" "+t+" ")>=0}function s(e,t){var n=l(e),r=n+t;u(n,t)||(e.className=r.substring(1))}function f(e,t){var n,r=l(e);u(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function l(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function p(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n})?r.call(t,n,t,e):r)||(e.exports=o)},function(e,t,n){var r=n(5),o=n(12),i=n(38),a=n(99),c=i("IE_PROTO"),u=Object.prototype;e.exports=a?Object.getPrototypeOf:function(e){return e=o(e),r(e,c)?e[c]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?u:null}},function(e,t,n){"use strict";var r=n(115),o=n(8),i=n(12),a=n(11),c=n(31),u=n(16),s=n(116),f=n(117),l=Math.max,p=Math.min,d=Math.floor,_=/\$([$&'`]|\d\d?|<[^>]*>)/g,g=/\$([$&'`]|\d\d?)/g;r("replace",2,(function(e,t,n,r){var b=r.REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE,h=r.REPLACE_KEEPS_$0,m=b?"$":"$0";return[function(n,r){var o=u(this),i=null==n?void 0:n[e];return void 0!==i?i.call(n,o,r):t.call(String(o),n,r)},function(e,r){if(!b&&h||"string"==typeof r&&-1===r.indexOf(m)){var i=n(t,e,this,r);if(i.done)return i.value}var u=o(e),d=String(this),_="function"==typeof r;_||(r=String(r));var g=u.global;if(g){var y=u.unicode;u.lastIndex=0}for(var w=[];;){var x=f(u,d);if(null===x)break;if(w.push(x),!g)break;""===String(x[0])&&(u.lastIndex=s(d,a(u.lastIndex),y))}for(var S,E="",A=0,O=0;O<w.length;O++){x=w[O];for(var k=String(x[0]),C=l(p(c(x.index),d.length),0),T=[],P=1;P<x.length;P++)T.push(void 0===(S=x[P])?S:String(S));var $=x.groups;if(_){var j=[k].concat(T,C,d);void 0!==$&&j.push($);var L=String(r.apply(void 0,j))}else L=v(k,d,C,T,$,r);C>=A&&(E+=d.slice(A,C)+L,A=C+k.length)}return E+d.slice(A)}];function v(e,n,r,o,a,c){var u=r+e.length,s=o.length,f=g;return void 0!==a&&(a=i(a),f=_),t.call(c,f,(function(t,i){var c;switch(i.charAt(0)){case"$":return"$";case"&":return e;case"`":return n.slice(0,r);case"'":return n.slice(u);case"<":c=a[i.slice(1,-1)];break;default:var f=+i;if(0===f)return t;if(f>s){var l=d(f/10);return 0===l?t:l<=s?void 0===o[l-1]?i.charAt(1):o[l-1]+i.charAt(1):t}c=o[f-1]}return void 0===c?"":c}))}}))},function(e,t,n){"use strict";var r=n(0),o=n(22).map,i=n(39),a=n(15),c=i("map"),u=a("map");r({target:"Array",proto:!0,forced:!c||!u},{map:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}})},function(e,t,n){var r=n(14),o=n(11),i=n(70),a=function(e){return function(t,n,a){var c,u=r(t),s=o(u.length),f=i(a,s);if(e&&n!=n){for(;s>f;)if((c=u[f++])!=c)return!0}else for(;s>f;f++)if((e||f in u)&&u[f]===n)return e||f||0;return!e&&-1}};e.exports={includes:a(!0),indexOf:a(!1)}},function(e,t,n){var r=n(2),o=n(21),i="".split;e.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==o(e)?i.call(e,""):Object(e)}:Object},function(e,t,n){var r=n(2),o=/#|\.prototype\./,i=function(e,t){var n=c[a(e)];return n==s||n!=u&&("function"==typeof t?r(t):!!t)},a=i.normalize=function(e){return String(e).replace(o,".").toLowerCase()},c=i.data={},u=i.NATIVE="N",s=i.POLYFILL="P";e.exports=i},function(e,t,n){var r=n(71);e.exports=function(e,t,n){if(r(e),void 0===t)return e;switch(n){case 0:return function(){return e.call(t)};case 1:return function(n){return e.call(t,n)};case 2:return function(n,r){return e.call(t,n,r)};case 3:return function(n,r,o){return e.call(t,n,r,o)}}return function(){return e.apply(t,arguments)}}},function(e,t,n){"use strict";var r=n(26),o=n(6),i=n(25);e.exports=function(e,t,n){var a=r(t);a in e?o.f(e,a,i(0,n)):e[a]=n}},function(e,t,n){"use strict";var r=n(0),o=n(101);r({target:"Array",proto:!0,forced:[].forEach!=o},{forEach:o})},function(e,t,n){var r=n(3),o=n(100),i=n(101),a=n(9);for(var c in o){var u=r[c],s=u&&u.prototype;if(s&&s.forEach!==i)try{a(s,"forEach",i)}catch(e){s.forEach=i}}},function(e,t,n){"use strict";var r,o,i=n(113),a=n(121),c=RegExp.prototype.exec,u=String.prototype.replace,s=c,f=(r=/a/,o=/b*/g,c.call(r,"a"),c.call(o,"a"),0!==r.lastIndex||0!==o.lastIndex),l=a.UNSUPPORTED_Y||a.BROKEN_CARET,p=void 0!==/()??/.exec("")[1];(f||p||l)&&(s=function(e){var t,n,r,o,a=this,s=l&&a.sticky,d=i.call(a),_=a.source,g=0,b=e;return s&&(-1===(d=d.replace("y","")).indexOf("g")&&(d+="g"),b=String(e).slice(a.lastIndex),a.lastIndex>0&&(!a.multiline||a.multiline&&"\n"!==e[a.lastIndex-1])&&(_="(?: "+_+")",b=" "+b,g++),n=new RegExp("^(?:"+_+")",d)),p&&(n=new RegExp("^"+_+"$(?!\\s)",d)),f&&(t=a.lastIndex),r=c.call(s?n:a,b),s?r?(r.input=r.input.slice(g),r[0]=r[0].slice(g),r.index=a.lastIndex,a.lastIndex+=r[0].length):a.lastIndex=0:f&&r&&(a.lastIndex=a.global?r.index+r[0].length:t),p&&r&&r.length>1&&u.call(r[0],n,(function(){for(o=1;o<arguments.length-2;o++)void 0===arguments[o]&&(r[o]=void 0)})),r}),e.exports=s},function(e,t,n){var r=n(7),o=n(6).f,i=Function.prototype,a=i.toString,c=/^\s*function ([^ (]*)/;r&&!("name"in i)&&o(i,"name",{configurable:!0,get:function(){try{return a.call(this).match(c)[1]}catch(e){return""}}})},function(e,t,n){var r=n(3),o=n(9);e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}},function(e,t,n){var r=n(27),o=n(87);(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.6.5",mode:r?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,n){var r=n(2);e.exports=!!Object.getOwnPropertySymbols&&!r((function(){return!String(Symbol())}))},function(e,t,n){var r={};r[n(1)("toStringTag")]="z",e.exports="[object z]"===String(r)},function(e,t,n){"use strict";var r=n(97).charAt,o=n(24),i=n(66),a=o.set,c=o.getterFor("String Iterator");i(String,"String",(function(e){a(this,{type:"String Iterator",string:String(e),index:0})}),(function(){var e,t=c(this),n=t.string,o=t.index;return o>=n.length?{value:void 0,done:!0}:(e=r(n,o),t.index+=e.length,{value:e,done:!1})}))},function(e,t,n){"use strict";var r=n(0),o=n(130),i=n(48),a=n(72),c=n(37),u=n(9),s=n(13),f=n(1),l=n(27),p=n(30),d=n(98),_=d.IteratorPrototype,g=d.BUGGY_SAFARI_ITERATORS,b=f("iterator"),h=function(){return this};e.exports=function(e,t,n,f,d,m,v){o(n,t,f);var y,w,x,S=function(e){if(e===d&&C)return C;if(!g&&e in O)return O[e];switch(e){case"keys":case"values":case"entries":return function(){return new n(this,e)}}return function(){return new n(this)}},E=t+" Iterator",A=!1,O=e.prototype,k=O[b]||O["@@iterator"]||d&&O[d],C=!g&&k||S(d),T="Array"==t&&O.entries||k;if(T&&(y=i(T.call(new e)),_!==Object.prototype&&y.next&&(l||i(y)===_||(a?a(y,_):"function"!=typeof y[b]&&u(y,b,h)),c(y,E,!0,!0),l&&(p[E]=h))),"values"==d&&k&&"values"!==k.name&&(A=!0,C=function(){return k.call(this)}),l&&!v||O[b]===C||u(O,b,C),p[t]=C,d)if(w={values:S("values"),keys:m?C:S("keys"),entries:S("entries")},v)for(x in w)(g||A||!(x in O))&&s(O,x,w[x]);else r({target:t,proto:!0,forced:g||A},w);return w}},function(e,t,n){var r=n(91),o=n(62);e.exports=Object.keys||function(e){return r(e,o)}},function(e,t,n){var r=n(3),o=n(100),i=n(120),a=n(9),c=n(1),u=c("iterator"),s=c("toStringTag"),f=i.values;for(var l in o){var p=r[l],d=p&&p.prototype;if(d){if(d[u]!==f)try{a(d,u,f)}catch(e){d[u]=f}if(d[s]||a(d,s,l),o[l])for(var _ in i)if(d[_]!==i[_])try{a(d,_,i[_])}catch(e){d[_]=i[_]}}}},function(e,t,n){var r=n(28),o=n(4),i=n(5),a=n(6).f,c=n(36),u=n(102),s=c("meta"),f=0,l=Object.isExtensible||function(){return!0},p=function(e){a(e,s,{value:{objectID:"O"+ ++f,weakData:{}}})},d=e.exports={REQUIRED:!1,fastKey:function(e,t){if(!o(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!i(e,s)){if(!l(e))return"F";if(!t)return"E";p(e)}return e[s].objectID},getWeakData:function(e,t){if(!i(e,s)){if(!l(e))return!0;if(!t)return!1;p(e)}return e[s].weakData},onFreeze:function(e){return u&&d.REQUIRED&&l(e)&&!i(e,s)&&p(e),e}};r[s]=!0},function(e,t,n){var r=n(31),o=Math.max,i=Math.min;e.exports=function(e,t){var n=r(e);return n<0?o(n+t,0):i(n,t)}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e}},function(e,t,n){var r=n(8),o=n(133);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(n,[]),t=n instanceof Array}catch(e){}return function(n,i){return r(n),o(i),t?e.call(n,i):n.__proto__=i,n}}():void 0)},function(e,t,n){var r=n(64),o=n(21),i=n(1)("toStringTag"),a="Arguments"==o(function(){return arguments}());e.exports=r?o:function(e){var t,n,r;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(n=function(e,t){try{return e[t]}catch(e){}}(t=Object(e),i))?n:a?o(t):"Object"==(r=o(t))&&"function"==typeof t.callee?"Arguments":r}},function(e,t,n){var r=n(0),o=n(12),i=n(67);r({target:"Object",stat:!0,forced:n(2)((function(){i(1)}))},{keys:function(e){return i(o(e))}})},function(e,t){e.exports=function(e,t,n){if(!(e instanceof t))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return e}},function(e,t,n){var r=n(4),o=n(72);e.exports=function(e,t,n){var i,a;return o&&"function"==typeof(i=t.constructor)&&i!==n&&r(a=i.prototype)&&a!==n.prototype&&o(e,a),e}},function(e,t,n){var r=n(1),o=n(20),i=n(6),a=r("unscopables"),c=Array.prototype;null==c[a]&&i.f(c,a,{configurable:!0,value:o(null)}),e.exports=function(e){c[a][e]=!0}},function(e,t,n){var r=function(e){"use strict";var t=Object.prototype,n=t.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",i=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function c(e,t,n,r){var o=t&&t.prototype instanceof f?t:f,i=Object.create(o.prototype),a=new x(r||[]);return i._invoke=function(e,t,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 c=v(a,n);if(c){if(c===s)continue;return c}}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 f=u(e,t,n);if("normal"===f.type){if(r=n.done?"completed":"suspendedYield",f.arg===s)continue;return{value:f.arg,done:n.done}}"throw"===f.type&&(r="completed",n.method="throw",n.arg=f.arg)}}}(e,n,a),i}function u(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}e.wrap=c;var s={};function f(){}function l(){}function p(){}var d={};d[o]=function(){return this};var _=Object.getPrototypeOf,g=_&&_(_(S([])));g&&g!==t&&n.call(g,o)&&(d=g);var b=p.prototype=f.prototype=Object.create(d);function h(e){["next","throw","return"].forEach((function(t){e[t]=function(e){return this._invoke(t,e)}}))}function m(e,t){var r;this._invoke=function(o,i){function a(){return new t((function(r,a){!function r(o,i,a,c){var s=u(e[o],e,i);if("throw"!==s.type){var f=s.arg,l=f.value;return l&&"object"==typeof l&&n.call(l,"__await")?t.resolve(l.__await).then((function(e){r("next",e,a,c)}),(function(e){r("throw",e,a,c)})):t.resolve(l).then((function(e){f.value=e,a(f)}),(function(e){return r("throw",e,a,c)}))}c(s.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function v(e,t){var n=e.iterator[t.method];if(void 0===n){if(t.delegate=null,"throw"===t.method){if(e.iterator.return&&(t.method="return",t.arg=void 0,v(e,t),"throw"===t.method))return s;t.method="throw",t.arg=new TypeError("The iterator does not provide a 'throw' method")}return s}var r=u(n,e.iterator,t.arg);if("throw"===r.type)return t.method="throw",t.arg=r.arg,t.delegate=null,s;var o=r.arg;return o?o.done?(t[e.resultName]=o.value,t.next=e.nextLoc,"return"!==t.method&&(t.method="next",t.arg=void 0),t.delegate=null,s):o:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,s)}function y(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function w(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function x(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(y,this),this.reset(!0)}function S(e){if(e){var t=e[o];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var r=-1,i=function t(){for(;++r<e.length;)if(n.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t};return i.next=i}}return{next:E}}function E(){return{value:void 0,done:!0}}return l.prototype=b.constructor=p,p.constructor=l,p[a]=l.displayName="GeneratorFunction",e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===l||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,p):(e.__proto__=p,a in e||(e[a]="GeneratorFunction")),e.prototype=Object.create(b),e},e.awrap=function(e){return{__await:e}},h(m.prototype),m.prototype[i]=function(){return this},e.AsyncIterator=m,e.async=function(t,n,r,o,i){void 0===i&&(i=Promise);var a=new m(c(t,n,r,o),i);return e.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},h(b),b[a]="Generator",b[o]=function(){return this},b.toString=function(){return"[object Generator]"},e.keys=function(e){var t=[];for(var n in e)t.push(n);return t.reverse(),function n(){for(;t.length;){var r=t.pop();if(r in e)return n.value=r,n.done=!1,n}return n.done=!0,n}},e.values=S,x.prototype={constructor:x,reset:function(e){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(w),!e)for(var t in this)"t"===t.charAt(0)&&n.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=void 0)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var t=this;function r(n,r){return a.type="throw",a.arg=e,t.next=n,r&&(t.method="next",t.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 c=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(e,t){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"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=e,a.arg=t,i?(this.method="next",this.next=i.finallyLoc,s):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),s},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),w(n),s}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var o=r.arg;w(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,n){return this.delegate={iterator:S(e),resultName:t,nextLoc:n},"next"===this.method&&(this.arg=void 0),s}},e}(e.exports);try{regeneratorRuntime=r}catch(e){Function("r","regeneratorRuntime = r")(r)}},function(e,t,n){"use strict";var r=n(0),o=n(3),i=n(29),a=n(27),c=n(7),u=n(63),s=n(94),f=n(2),l=n(5),p=n(34),d=n(4),_=n(8),g=n(12),b=n(14),h=n(26),m=n(25),v=n(20),y=n(67),w=n(32),x=n(140),S=n(92),E=n(19),A=n(6),O=n(83),k=n(9),C=n(13),T=n(61),P=n(38),$=n(28),j=n(36),L=n(1),I=n(105),R=n(141),M=n(37),D=n(24),B=n(22).forEach,N=P("hidden"),F=L("toPrimitive"),U=D.set,W=D.getterFor("Symbol"),V=Object.prototype,H=o.Symbol,z=i("JSON","stringify"),q=E.f,G=A.f,K=x.f,Z=O.f,X=T("symbols"),Y=T("op-symbols"),Q=T("string-to-symbol-registry"),J=T("symbol-to-string-registry"),ee=T("wks"),te=o.QObject,ne=!te||!te.prototype||!te.prototype.findChild,re=c&&f((function(){return 7!=v(G({},"a",{get:function(){return G(this,"a",{value:7}).a}})).a}))?function(e,t,n){var r=q(V,t);r&&delete V[t],G(e,t,n),r&&e!==V&&G(V,t,r)}:G,oe=function(e,t){var n=X[e]=v(H.prototype);return U(n,{type:"Symbol",tag:e,description:t}),c||(n.description=t),n},ie=s?function(e){return"symbol"==typeof e}:function(e){return Object(e)instanceof H},ae=function(e,t,n){e===V&&ae(Y,t,n),_(e);var r=h(t,!0);return _(n),l(X,r)?(n.enumerable?(l(e,N)&&e[N][r]&&(e[N][r]=!1),n=v(n,{enumerable:m(0,!1)})):(l(e,N)||G(e,N,m(1,{})),e[N][r]=!0),re(e,r,n)):G(e,r,n)},ce=function(e,t){_(e);var n=b(t),r=y(n).concat(le(n));return B(r,(function(t){c&&!ue.call(n,t)||ae(e,t,n[t])})),e},ue=function(e){var t=h(e,!0),n=Z.call(this,t);return!(this===V&&l(X,t)&&!l(Y,t))&&(!(n||!l(this,t)||!l(X,t)||l(this,N)&&this[N][t])||n)},se=function(e,t){var n=b(e),r=h(t,!0);if(n!==V||!l(X,r)||l(Y,r)){var o=q(n,r);return!o||!l(X,r)||l(n,N)&&n[N][r]||(o.enumerable=!0),o}},fe=function(e){var t=K(b(e)),n=[];return B(t,(function(e){l(X,e)||l($,e)||n.push(e)})),n},le=function(e){var t=e===V,n=K(t?Y:b(e)),r=[];return B(n,(function(e){!l(X,e)||t&&!l(V,e)||r.push(X[e])})),r};(u||(C((H=function(){if(this instanceof H)throw TypeError("Symbol is not a constructor");var e=arguments.length&&void 0!==arguments[0]?String(arguments[0]):void 0,t=j(e),n=function(e){this===V&&n.call(Y,e),l(this,N)&&l(this[N],t)&&(this[N][t]=!1),re(this,t,m(1,e))};return c&&ne&&re(V,t,{configurable:!0,set:n}),oe(t,e)}).prototype,"toString",(function(){return W(this).tag})),C(H,"withoutSetter",(function(e){return oe(j(e),e)})),O.f=ue,A.f=ae,E.f=se,w.f=x.f=fe,S.f=le,I.f=function(e){return oe(L(e),e)},c&&(G(H.prototype,"description",{configurable:!0,get:function(){return W(this).description}}),a||C(V,"propertyIsEnumerable",ue,{unsafe:!0}))),r({global:!0,wrap:!0,forced:!u,sham:!u},{Symbol:H}),B(y(ee),(function(e){R(e)})),r({target:"Symbol",stat:!0,forced:!u},{for:function(e){var t=String(e);if(l(Q,t))return Q[t];var n=H(t);return Q[t]=n,J[n]=t,n},keyFor:function(e){if(!ie(e))throw TypeError(e+" is not a symbol");if(l(J,e))return J[e]},useSetter:function(){ne=!0},useSimple:function(){ne=!1}}),r({target:"Object",stat:!0,forced:!u,sham:!c},{create:function(e,t){return void 0===t?v(e):ce(v(e),t)},defineProperty:ae,defineProperties:ce,getOwnPropertyDescriptor:se}),r({target:"Object",stat:!0,forced:!u},{getOwnPropertyNames:fe,getOwnPropertySymbols:le}),r({target:"Object",stat:!0,forced:f((function(){S.f(1)}))},{getOwnPropertySymbols:function(e){return S.f(g(e))}}),z)&&r({target:"JSON",stat:!0,forced:!u||f((function(){var e=H();return"[null]"!=z([e])||"{}"!=z({a:e})||"{}"!=z(Object(e))}))},{stringify:function(e,t,n){for(var r,o=[e],i=1;arguments.length>i;)o.push(arguments[i++]);if(r=t,(d(t)||void 0!==e)&&!ie(e))return p(t)||(t=function(e,t){if("function"==typeof r&&(t=r.call(this,e,t)),!ie(t))return t}),o[1]=t,z.apply(null,o)}});H.prototype[F]||k(H.prototype,F,H.prototype.valueOf),M(H,"Symbol"),$[N]=!0},function(e,t,n){"use strict";var r=n(0),o=n(7),i=n(3),a=n(5),c=n(4),u=n(6).f,s=n(88),f=i.Symbol;if(o&&"function"==typeof f&&(!("description"in f.prototype)||void 0!==f().description)){var l={},p=function(){var e=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),t=this instanceof p?new f(e):void 0===e?f():f(e);return""===e&&(l[t]=!0),t};s(p,f);var d=p.prototype=f.prototype;d.constructor=p;var _=d.toString,g="Symbol(test)"==String(f("test")),b=/^Symbol\((.*)\)[^)]+$/;u(d,"description",{configurable:!0,get:function(){var e=c(this)?this.valueOf():this,t=_.call(e);if(a(l,e))return"";var n=g?t.slice(7,-1):t.replace(b,"$1");return""===n?void 0:n}}),r({global:!0,forced:!0},{Symbol:p})}},function(e,t,n){var r=n(16),o="["+n(82)+"]",i=RegExp("^"+o+o+"*"),a=RegExp(o+o+"*$"),c=function(e){return function(t){var n=String(r(t));return 1&e&&(n=n.replace(i,"")),2&e&&(n=n.replace(a,"")),n}};e.exports={start:c(1),end:c(2),trim:c(3)}},function(e,t){e.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},function(e,t,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,i=o&&!r.call({1:2},1);t.f=i?function(e){var t=o(this,e);return!!t&&t.enumerable}:r},function(e,t,n){var r=n(7),o=n(2),i=n(85);e.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},function(e,t,n){var r=n(3),o=n(4),i=r.document,a=o(i)&&o(i.createElement);e.exports=function(e){return a?i.createElement(e):{}}},function(e,t,n){var r=n(87),o=Function.toString;"function"!=typeof r.inspectSource&&(r.inspectSource=function(e){return o.call(e)}),e.exports=r.inspectSource},function(e,t,n){var r=n(3),o=n(60),i=r["__core-js_shared__"]||o("__core-js_shared__",{});e.exports=i},function(e,t,n){var r=n(5),o=n(89),i=n(19),a=n(6);e.exports=function(e,t){for(var n=o(t),c=a.f,u=i.f,s=0;s<n.length;s++){var f=n[s];r(e,f)||c(e,f,u(t,f))}}},function(e,t,n){var r=n(29),o=n(32),i=n(92),a=n(8);e.exports=r("Reflect","ownKeys")||function(e){var t=o.f(a(e)),n=i.f;return n?t.concat(n(e)):t}},function(e,t,n){var r=n(3);e.exports=r},function(e,t,n){var r=n(5),o=n(14),i=n(51).indexOf,a=n(28);e.exports=function(e,t){var n,c=o(e),u=0,s=[];for(n in c)!r(a,n)&&r(c,n)&&s.push(n);for(;t.length>u;)r(c,n=t[u++])&&(~i(s,n)||s.push(n));return s}},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t,n){var r=n(4),o=n(34),i=n(1)("species");e.exports=function(e,t){var n;return o(e)&&("function"!=typeof(n=e.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===t?0:t)}},function(e,t,n){var r=n(63);e.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(e,t,n){var r,o,i=n(3),a=n(96),c=i.process,u=c&&c.versions,s=u&&u.v8;s?o=(r=s.split("."))[0]+r[1]:a&&(!(r=a.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/))&&(o=r[1]),e.exports=o&&+o},function(e,t,n){var r=n(29);e.exports=r("navigator","userAgent")||""},function(e,t,n){var r=n(31),o=n(16),i=function(e){return function(t,n){var i,a,c=String(o(t)),u=r(n),s=c.length;return u<0||u>=s?e?"":void 0:(i=c.charCodeAt(u))<55296||i>56319||u+1===s||(a=c.charCodeAt(u+1))<56320||a>57343?e?c.charAt(u):i:e?c.slice(u,u+2):a-56320+(i-55296<<10)+65536}};e.exports={codeAt:i(!1),charAt:i(!0)}},function(e,t,n){"use strict";var r,o,i,a=n(48),c=n(9),u=n(5),s=n(1),f=n(27),l=s("iterator"),p=!1;[].keys&&("next"in(i=[].keys())?(o=a(a(i)))!==Object.prototype&&(r=o):p=!0),null==r&&(r={}),f||u(r,l)||c(r,l,(function(){return this})),e.exports={IteratorPrototype:r,BUGGY_SAFARI_ITERATORS:p}},function(e,t,n){var r=n(2);e.exports=!r((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}))},function(e,t){e.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(e,t,n){"use strict";var r=n(22).forEach,o=n(33),i=n(15),a=o("forEach"),c=i("forEach");e.exports=a&&c?[].forEach:function(e){return r(this,e,arguments.length>1?arguments[1]:void 0)}},function(e,t,n){var r=n(2);e.exports=!r((function(){return Object.isExtensible(Object.preventExtensions({}))}))},function(e,t,n){var r=n(111);e.exports=function(e){if(r(e))throw TypeError("The method doesn't accept regular expressions");return e}},function(e,t,n){var r=n(1)("match");e.exports=function(e){var t=/./;try{"/./"[e](t)}catch(n){try{return t[r]=!1,"/./"[e](t)}catch(e){}}return!1}},function(e,t,n){var r=n(1);t.f=r},function(e,t,n){var r=n(8),o=n(122),i=n(11),a=n(54),c=n(123),u=n(144),s=function(e,t){this.stopped=e,this.result=t};(e.exports=function(e,t,n,f,l){var p,d,_,g,b,h,m,v=a(t,n,f?2:1);if(l)p=e;else{if("function"!=typeof(d=c(e)))throw TypeError("Target is not iterable");if(o(d)){for(_=0,g=i(e.length);g>_;_++)if((b=f?v(r(m=e[_])[0],m[1]):v(e[_]))&&b instanceof s)return b;return new s(!1)}p=d.call(e)}for(h=p.next;!(m=h.call(p)).done;)if("object"==typeof(b=u(p,v,m.value,f))&&b&&b instanceof s)return b;return new s(!1)}).stop=function(e){return new s(!0,e)}},function(e,t,n){var r=n(0),o=n(3),i=n(96),a=[].slice,c=function(e){return function(t,n){var r=arguments.length>2,o=r?a.call(arguments,2):void 0;return e(r?function(){("function"==typeof t?t:Function(t)).apply(this,o)}:t,n)}};r({global:!0,bind:!0,forced:/MSIE .\./.test(i)},{setTimeout:c(o.setTimeout),setInterval:c(o.setInterval)})},function(e,t,n){"use strict";var r=n(0),o=n(22).some,i=n(33),a=n(15),c=i("some"),u=a("some");r({target:"Array",proto:!0,forced:!c||!u},{some:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}})},function(e,t,n){"use strict";var r=n(0),o=n(2),i=n(34),a=n(4),c=n(12),u=n(11),s=n(55),f=n(93),l=n(39),p=n(1),d=n(95),_=p("isConcatSpreadable"),g=d>=51||!o((function(){var e=[];return e[_]=!1,e.concat()[0]!==e})),b=l("concat"),h=function(e){if(!a(e))return!1;var t=e[_];return void 0!==t?!!t:i(e)};r({target:"Array",proto:!0,forced:!g||!b},{concat:function(e){var t,n,r,o,i,a=c(this),l=f(a,0),p=0;for(t=-1,r=arguments.length;t<r;t++)if(i=-1===t?a:arguments[t],h(i)){if(p+(o=u(i.length))>9007199254740991)throw TypeError("Maximum allowed index exceeded");for(n=0;n<o;n++,p++)n in i&&s(l,p,i[n])}else{if(p>=9007199254740991)throw TypeError("Maximum allowed index exceeded");s(l,p++,i)}return l.length=p,l}})},function(e,t,n){var r=n(71),o=n(12),i=n(52),a=n(11),c=function(e){return function(t,n,c,u){r(n);var s=o(t),f=i(s),l=a(s.length),p=e?l-1:0,d=e?-1:1;if(c<2)for(;;){if(p in f){u=f[p],p+=d;break}if(p+=d,e?p<0:l<=p)throw TypeError("Reduce of empty array with no initial value")}for(;e?p>=0:l>p;p+=d)p in f&&(u=n(u,f[p],p,s));return u}};e.exports={left:c(!1),right:c(!0)}},function(e,t,n){var r=n(4),o=n(21),i=n(1)("match");e.exports=function(e){var t;return r(e)&&(void 0!==(t=e[i])?!!t:"RegExp"==o(e))}},function(e,t,n){"use strict";var r=n(0),o=n(51).includes,i=n(77);r({target:"Array",proto:!0,forced:!n(15)("indexOf",{ACCESSORS:!0,1:0})},{includes:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}}),i("includes")},function(e,t,n){"use strict";var r=n(8);e.exports=function(){var e=r(this),t="";return e.global&&(t+="g"),e.ignoreCase&&(t+="i"),e.multiline&&(t+="m"),e.dotAll&&(t+="s"),e.unicode&&(t+="u"),e.sticky&&(t+="y"),t}},function(e,t,n){"use strict";var r=n(0),o=n(103),i=n(16);r({target:"String",proto:!0,forced:!n(104)("includes")},{includes:function(e){return!!~String(i(this)).indexOf(o(e),arguments.length>1?arguments[1]:void 0)}})},function(e,t,n){"use strict";n(23);var r=n(13),o=n(2),i=n(1),a=n(58),c=n(9),u=i("species"),s=!o((function(){var e=/./;return e.exec=function(){var e=[];return e.groups={a:"7"},e},"7"!=="".replace(e,"$<a>")})),f="$0"==="a".replace(/./,"$0"),l=i("replace"),p=!!/./[l]&&""===/./[l]("a","$0"),d=!o((function(){var e=/(?:)/,t=e.exec;e.exec=function(){return t.apply(this,arguments)};var n="ab".split(e);return 2!==n.length||"a"!==n[0]||"b"!==n[1]}));e.exports=function(e,t,n,l){var _=i(e),g=!o((function(){var t={};return t[_]=function(){return 7},7!=""[e](t)})),b=g&&!o((function(){var t=!1,n=/a/;return"split"===e&&((n={}).constructor={},n.constructor[u]=function(){return n},n.flags="",n[_]=/./[_]),n.exec=function(){return t=!0,null},n[_](""),!t}));if(!g||!b||"replace"===e&&(!s||!f||p)||"split"===e&&!d){var h=/./[_],m=n(_,""[e],(function(e,t,n,r,o){return t.exec===a?g&&!o?{done:!0,value:h.call(t,n,r)}:{done:!0,value:e.call(n,t,r)}:{done:!1}}),{REPLACE_KEEPS_$0:f,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:p}),v=m[0],y=m[1];r(String.prototype,e,v),r(RegExp.prototype,_,2==t?function(e,t){return y.call(e,this,t)}:function(e){return y.call(e,this)})}l&&c(RegExp.prototype[_],"sham",!0)}},function(e,t,n){"use strict";var r=n(97).charAt;e.exports=function(e,t,n){return t+(n?r(e,t).length:1)}},function(e,t,n){var r=n(21),o=n(58);e.exports=function(e,t){var n=e.exec;if("function"==typeof n){var i=n.call(e,t);if("object"!=typeof i)throw TypeError("RegExp exec method returned something other than an Object or null");return i}if("RegExp"!==r(e))throw TypeError("RegExp#exec called on incompatible receiver");return o.call(e,t)}},function(e,t,n){"use strict";var r=n(29),o=n(6),i=n(1),a=n(7),c=i("species");e.exports=function(e){var t=r(e),n=o.f;a&&t&&!t[c]&&n(t,c,{configurable:!0,get:function(){return this}})}},function(e,t,n){"use strict";var r=n(0),o=n(51).indexOf,i=n(33),a=n(15),c=[].indexOf,u=!!c&&1/[1].indexOf(1,-0)<0,s=i("indexOf"),f=a("indexOf",{ACCESSORS:!0,1:0});r({target:"Array",proto:!0,forced:u||!s||!f},{indexOf:function(e){return u?c.apply(this,arguments)||0:o(this,e,arguments.length>1?arguments[1]:void 0)}})},function(e,t,n){"use strict";var r=n(14),o=n(77),i=n(30),a=n(24),c=n(66),u=a.set,s=a.getterFor("Array Iterator");e.exports=c(Array,"Array",(function(e,t){u(this,{type:"Array Iterator",target:r(e),index:0,kind:t})}),(function(){var e=s(this),t=e.target,n=e.kind,r=e.index++;return!t||r>=t.length?(e.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:r,done:!1}:"values"==n?{value:t[r],done:!1}:{value:[r,t[r]],done:!1}}),"values"),i.Arguments=i.Array,o("keys"),o("values"),o("entries")},function(e,t,n){"use strict";var r=n(2);function o(e,t){return RegExp(e,t)}t.UNSUPPORTED_Y=r((function(){var e=o("a","y");return e.lastIndex=2,null!=e.exec("abcd")})),t.BROKEN_CARET=r((function(){var e=o("^r","gy");return e.lastIndex=2,null!=e.exec("str")}))},function(e,t,n){var r=n(1),o=n(30),i=r("iterator"),a=Array.prototype;e.exports=function(e){return void 0!==e&&(o.Array===e||a[i]===e)}},function(e,t,n){var r=n(73),o=n(30),i=n(1)("iterator");e.exports=function(e){if(null!=e)return e[i]||e["@@iterator"]||o[r(e)]}},function(e,t,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(e){}e.exports=function(e,t){if(!t&&!o)return!1;var n=!1;try{var i={};i[r]=function(){return{next:function(){return{done:n=!0}}}},e(i)}catch(e){}return n}},function(e,t,n){var r=n(13);e.exports=function(e,t,n){for(var o in t)r(e,o,t[o],n);return e}},function(e,t,n){var r=n(0),o=n(146);r({global:!0,forced:parseInt!=o},{parseInt:o})},function(e,t,n){e.exports=n(154)},function(e,t,n){var r=n(3),o=n(86),i=r.WeakMap;e.exports="function"==typeof i&&/native code/.test(o(i))},function(e,t,n){"use strict";var r=n(64),o=n(73);e.exports=r?{}.toString:function(){return"[object "+o(this)+"]"}},function(e,t,n){"use strict";var r=n(98).IteratorPrototype,o=n(20),i=n(25),a=n(37),c=n(30),u=function(){return this};e.exports=function(e,t,n){var s=t+" Iterator";return e.prototype=o(r,{next:i(1,n)}),a(e,s,!1,!0),c[s]=u,e}},function(e,t,n){var r=n(7),o=n(6),i=n(8),a=n(67);e.exports=r?Object.defineProperties:function(e,t){i(e);for(var n,r=a(t),c=r.length,u=0;c>u;)o.f(e,n=r[u++],t[n]);return e}},function(e,t,n){var r=n(29);e.exports=r("document","documentElement")},function(e,t,n){var r=n(4);e.exports=function(e){if(!r(e)&&null!==e)throw TypeError("Can't set "+String(e)+" as a prototype");return e}},function(e,t,n){"use strict";var r=n(0),o=n(110).left,i=n(33),a=n(15),c=i("reduce"),u=a("reduce",{1:0});r({target:"Array",proto:!0,forced:!c||!u},{reduce:function(e){return o(this,e,arguments.length,arguments.length>1?arguments[1]:void 0)}})},function(e,t,n){var r=n(0),o=n(102),i=n(2),a=n(4),c=n(69).onFreeze,u=Object.freeze;r({target:"Object",stat:!0,forced:i((function(){u(1)})),sham:!o},{freeze:function(e){return u&&a(e)?u(c(e)):e}})},function(e,t,n){var r=n(0),o=n(7),i=n(89),a=n(14),c=n(19),u=n(55);r({target:"Object",stat:!0,sham:!o},{getOwnPropertyDescriptors:function(e){for(var t,n,r=a(e),o=c.f,s=i(r),f={},l=0;s.length>l;)void 0!==(n=o(r,t=s[l++]))&&u(f,t,n);return f}})},function(e,t,n){var r=n(0),o=n(2),i=n(12),a=n(48),c=n(99);r({target:"Object",stat:!0,forced:o((function(){a(1)})),sham:!c},{getPrototypeOf:function(e){return a(i(e))}})},function(e,t,n){"use strict";var r,o=n(0),i=n(19).f,a=n(11),c=n(103),u=n(16),s=n(104),f=n(27),l="".startsWith,p=Math.min,d=s("startsWith");o({target:"String",proto:!0,forced:!!(f||d||(r=i(String.prototype,"startsWith"),!r||r.writable))&&!d},{startsWith:function(e){var t=String(u(this));c(e);var n=a(p(arguments.length>1?arguments[1]:void 0,t.length)),r=String(e);return l?l.call(t,r,n):t.slice(n,n+r.length)===r}})},function(e,t,n){n(0)({target:"Object",stat:!0,sham:!n(7)},{create:n(20)})},function(e,t,n){var r=n(14),o=n(32).f,i={}.toString,a="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];e.exports.f=function(e){return a&&"[object Window]"==i.call(e)?function(e){try{return o(e)}catch(e){return a.slice()}}(e):o(r(e))}},function(e,t,n){var r=n(90),o=n(5),i=n(105),a=n(6).f;e.exports=function(e){var t=r.Symbol||(r.Symbol={});o(t,e)||a(t,e,{value:i.f(e)})}},function(e,t,n){"use strict";var r=n(143),o=n(145);e.exports=r("Set",(function(e){return function(){return e(this,arguments.length?arguments[0]:void 0)}}),o)},function(e,t,n){"use strict";var r=n(0),o=n(3),i=n(53),a=n(13),c=n(69),u=n(106),s=n(75),f=n(4),l=n(2),p=n(124),d=n(37),_=n(76);e.exports=function(e,t,n){var g=-1!==e.indexOf("Map"),b=-1!==e.indexOf("Weak"),h=g?"set":"add",m=o[e],v=m&&m.prototype,y=m,w={},x=function(e){var t=v[e];a(v,e,"add"==e?function(e){return t.call(this,0===e?0:e),this}:"delete"==e?function(e){return!(b&&!f(e))&&t.call(this,0===e?0:e)}:"get"==e?function(e){return b&&!f(e)?void 0:t.call(this,0===e?0:e)}:"has"==e?function(e){return!(b&&!f(e))&&t.call(this,0===e?0:e)}:function(e,n){return t.call(this,0===e?0:e,n),this})};if(i(e,"function"!=typeof m||!(b||v.forEach&&!l((function(){(new m).entries().next()})))))y=n.getConstructor(t,e,g,h),c.REQUIRED=!0;else if(i(e,!0)){var S=new y,E=S[h](b?{}:-0,1)!=S,A=l((function(){S.has(1)})),O=p((function(e){new m(e)})),k=!b&&l((function(){for(var e=new m,t=5;t--;)e[h](t,t);return!e.has(-0)}));O||((y=t((function(t,n){s(t,y,e);var r=_(new m,t,y);return null!=n&&u(n,r[h],r,g),r}))).prototype=v,v.constructor=y),(A||k)&&(x("delete"),x("has"),g&&x("get")),(k||E)&&x(h),b&&v.clear&&delete v.clear}return w[e]=y,r({global:!0,forced:y!=m},w),d(y,e),b||n.setStrong(y,e,g),y}},function(e,t,n){var r=n(8);e.exports=function(e,t,n,o){try{return o?t(r(n)[0],n[1]):t(n)}catch(t){var i=e.return;throw void 0!==i&&r(i.call(e)),t}}},function(e,t,n){"use strict";var r=n(6).f,o=n(20),i=n(125),a=n(54),c=n(75),u=n(106),s=n(66),f=n(118),l=n(7),p=n(69).fastKey,d=n(24),_=d.set,g=d.getterFor;e.exports={getConstructor:function(e,t,n,s){var f=e((function(e,r){c(e,f,t),_(e,{type:t,index:o(null),first:void 0,last:void 0,size:0}),l||(e.size=0),null!=r&&u(r,e[s],e,n)})),d=g(t),b=function(e,t,n){var r,o,i=d(e),a=h(e,t);return a?a.value=n:(i.last=a={index:o=p(t,!0),key:t,value:n,previous:r=i.last,next:void 0,removed:!1},i.first||(i.first=a),r&&(r.next=a),l?i.size++:e.size++,"F"!==o&&(i.index[o]=a)),e},h=function(e,t){var n,r=d(e),o=p(t);if("F"!==o)return r.index[o];for(n=r.first;n;n=n.next)if(n.key==t)return n};return i(f.prototype,{clear:function(){for(var e=d(this),t=e.index,n=e.first;n;)n.removed=!0,n.previous&&(n.previous=n.previous.next=void 0),delete t[n.index],n=n.next;e.first=e.last=void 0,l?e.size=0:this.size=0},delete:function(e){var t=d(this),n=h(this,e);if(n){var r=n.next,o=n.previous;delete t.index[n.index],n.removed=!0,o&&(o.next=r),r&&(r.previous=o),t.first==n&&(t.first=r),t.last==n&&(t.last=o),l?t.size--:this.size--}return!!n},forEach:function(e){for(var t,n=d(this),r=a(e,arguments.length>1?arguments[1]:void 0,3);t=t?t.next:n.first;)for(r(t.value,t.key,this);t&&t.removed;)t=t.previous},has:function(e){return!!h(this,e)}}),i(f.prototype,n?{get:function(e){var t=h(this,e);return t&&t.value},set:function(e,t){return b(this,0===e?0:e,t)}}:{add:function(e){return b(this,e=0===e?0:e,e)}}),l&&r(f.prototype,"size",{get:function(){return d(this).size}}),f},setStrong:function(e,t,n){var r=t+" Iterator",o=g(t),i=g(r);s(e,t,(function(e,t){_(this,{type:r,target:e,state:o(e),kind:t,last:void 0})}),(function(){for(var e=i(this),t=e.kind,n=e.last;n&&n.removed;)n=n.previous;return e.target&&(e.last=n=n?n.next:e.state.first)?"keys"==t?{value:n.key,done:!1}:"values"==t?{value:n.value,done:!1}:{value:[n.key,n.value],done:!1}:(e.target=void 0,{value:void 0,done:!0})}),n?"entries":"values",!n,!0),f(t)}}},function(e,t,n){var r=n(3),o=n(81).trim,i=n(82),a=r.parseInt,c=/^[+-]?0[Xx]/,u=8!==a(i+"08")||22!==a(i+"0x16");e.exports=u?function(e,t){var n=o(String(e));return a(n,t>>>0||(c.test(n)?16:10))}:a},function(e,t,n){"use strict";var r=n(42);n.n(r).a},function(e,t,n){},function(e,t,n){n(17),Promise.all([n.e(0),n.e(36)]).then(n.t.bind(null,155,7))},function(e,t,n){},function(e,t,n){"use strict";var r=n(7),o=n(3),i=n(53),a=n(13),c=n(5),u=n(21),s=n(76),f=n(26),l=n(2),p=n(20),d=n(32).f,_=n(19).f,g=n(6).f,b=n(81).trim,h=o.Number,m=h.prototype,v="Number"==u(p(m)),y=function(e){var t,n,r,o,i,a,c,u,s=f(e,!1);if("string"==typeof s&&s.length>2)if(43===(t=(s=b(s)).charCodeAt(0))||45===t){if(88===(n=s.charCodeAt(2))||120===n)return NaN}else if(48===t){switch(s.charCodeAt(1)){case 66:case 98:r=2,o=49;break;case 79:case 111:r=8,o=55;break;default:return+s}for(a=(i=s.slice(2)).length,c=0;c<a;c++)if((u=i.charCodeAt(c))<48||u>o)return NaN;return parseInt(i,r)}return+s};if(i("Number",!h(" 0o1")||!h("0b1")||h("+0x1"))){for(var w,x=function(e){var t=arguments.length<1?0:e,n=this;return n instanceof x&&(v?l((function(){m.valueOf.call(n)})):"Number"!=u(n))?s(new h(y(t)),n,x):y(t)},S=r?d(h):"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++)c(h,w=S[E])&&!c(x,w)&&g(x,w,_(h,w));x.prototype=m,m.constructor=x,a(o,"Number",x)}},function(e,t,n){"use strict";var r=n(43);n.n(r).a},function(e,t,n){"use strict";var r=n(44);n.n(r).a},function(e,t,n){"use strict";n.r(t);n(18),n(50),n(35),n(17),n(65),n(68),n(78);var r=n(40),o=Object.freeze({});function i(e){return null==e}function a(e){return null!=e}function c(e){return!0===e}function u(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function s(e){return null!==e&&"object"==typeof e}var f=Object.prototype.toString;function l(e){return"[object Object]"===f.call(e)}function p(e){return"[object RegExp]"===f.call(e)}function d(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function _(e){return a(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function g(e){return null==e?"":Array.isArray(e)||l(e)&&e.toString===f?JSON.stringify(e,null,2):String(e)}function b(e){var t=parseFloat(e);return isNaN(t)?e:t}function h(e,t){for(var n=Object.create(null),r=e.split(","),o=0;o<r.length;o++)n[r[o]]=!0;return t?function(e){return n[e.toLowerCase()]}:function(e){return n[e]}}h("slot,component",!0);var m=h("key,ref,slot,slot-scope,is");function v(e,t){if(e.length){var n=e.indexOf(t);if(n>-1)return e.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function w(e,t){return y.call(e,t)}function x(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var S=/-(\w)/g,E=x((function(e){return e.replace(S,(function(e,t){return t?t.toUpperCase():""}))})),A=x((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),O=/\B([A-Z])/g,k=x((function(e){return e.replace(O,"-$1").toLowerCase()}));var C=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function T(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function P(e,t){for(var n in t)e[n]=t[n];return e}function $(e){for(var t={},n=0;n<e.length;n++)e[n]&&P(t,e[n]);return t}function j(e,t,n){}var L=function(e,t,n){return!1},I=function(e){return e};function R(e,t){if(e===t)return!0;var n=s(e),r=s(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var o=Array.isArray(e),i=Array.isArray(t);if(o&&i)return e.length===t.length&&e.every((function(e,n){return R(e,t[n])}));if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(o||i)return!1;var a=Object.keys(e),c=Object.keys(t);return a.length===c.length&&a.every((function(n){return R(e[n],t[n])}))}catch(e){return!1}}function M(e,t){for(var n=0;n<e.length;n++)if(R(e[n],t))return n;return-1}function D(e){var t=!1;return function(){t||(t=!0,e.apply(this,arguments))}}var B=["component","directive","filter"],N=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch"],F={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:L,isReservedAttr:L,isUnknownElement:L,getTagNamespace:j,parsePlatformTagName:I,mustUseProp:L,async:!0,_lifecycleHooks:N},U=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function W(e,t,n,r){Object.defineProperty(e,t,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var V=new RegExp("[^"+U.source+".$_\\d]");var H,z="__proto__"in{},q="undefined"!=typeof window,G="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,K=G&&WXEnvironment.platform.toLowerCase(),Z=q&&window.navigator.userAgent.toLowerCase(),X=Z&&/msie|trident/.test(Z),Y=Z&&Z.indexOf("msie 9.0")>0,Q=Z&&Z.indexOf("edge/")>0,J=(Z&&Z.indexOf("android"),Z&&/iphone|ipad|ipod|ios/.test(Z)||"ios"===K),ee=(Z&&/chrome\/\d+/.test(Z),Z&&/phantomjs/.test(Z),Z&&Z.match(/firefox\/(\d+)/)),te={}.watch,ne=!1;if(q)try{var re={};Object.defineProperty(re,"passive",{get:function(){ne=!0}}),window.addEventListener("test-passive",null,re)}catch(e){}var oe=function(){return void 0===H&&(H=!q&&!G&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),H},ie=q&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ae(e){return"function"==typeof e&&/native code/.test(e.toString())}var ce,ue="undefined"!=typeof Symbol&&ae(Symbol)&&"undefined"!=typeof Reflect&&ae(Reflect.ownKeys);ce="undefined"!=typeof Set&&ae(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var se=j,fe=0,le=function(){this.id=fe++,this.subs=[]};le.prototype.addSub=function(e){this.subs.push(e)},le.prototype.removeSub=function(e){v(this.subs,e)},le.prototype.depend=function(){le.target&&le.target.addDep(this)},le.prototype.notify=function(){var e=this.subs.slice();for(var t=0,n=e.length;t<n;t++)e[t].update()},le.target=null;var pe=[];function de(e){pe.push(e),le.target=e}function _e(){pe.pop(),le.target=pe[pe.length-1]}var ge=function(e,t,n,r,o,i,a,c){this.tag=e,this.data=t,this.children=n,this.text=r,this.elm=o,this.ns=void 0,this.context=i,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=c,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1},be={child:{configurable:!0}};be.child.get=function(){return this.componentInstance},Object.defineProperties(ge.prototype,be);var he=function(e){void 0===e&&(e="");var t=new ge;return t.text=e,t.isComment=!0,t};function me(e){return new ge(void 0,void 0,void 0,String(e))}function ve(e){var t=new ge(e.tag,e.data,e.children&&e.children.slice(),e.text,e.elm,e.context,e.componentOptions,e.asyncFactory);return t.ns=e.ns,t.isStatic=e.isStatic,t.key=e.key,t.isComment=e.isComment,t.fnContext=e.fnContext,t.fnOptions=e.fnOptions,t.fnScopeId=e.fnScopeId,t.asyncMeta=e.asyncMeta,t.isCloned=!0,t}var ye=Array.prototype,we=Object.create(ye);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(e){var t=ye[e];W(we,e,(function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];var o,i=t.apply(this,n),a=this.__ob__;switch(e){case"push":case"unshift":o=n;break;case"splice":o=n.slice(2)}return o&&a.observeArray(o),a.dep.notify(),i}))}));var xe=Object.getOwnPropertyNames(we),Se=!0;function Ee(e){Se=e}var Ae=function(e){var t;this.value=e,this.dep=new le,this.vmCount=0,W(e,"__ob__",this),Array.isArray(e)?(z?(t=we,e.__proto__=t):function(e,t,n){for(var r=0,o=n.length;r<o;r++){var i=n[r];W(e,i,t[i])}}(e,we,xe),this.observeArray(e)):this.walk(e)};function Oe(e,t){var n;if(s(e)&&!(e instanceof ge))return w(e,"__ob__")&&e.__ob__ instanceof Ae?n=e.__ob__:Se&&!oe()&&(Array.isArray(e)||l(e))&&Object.isExtensible(e)&&!e._isVue&&(n=new Ae(e)),t&&n&&n.vmCount++,n}function ke(e,t,n,r,o){var i=new le,a=Object.getOwnPropertyDescriptor(e,t);if(!a||!1!==a.configurable){var c=a&&a.get,u=a&&a.set;c&&!u||2!==arguments.length||(n=e[t]);var s=!o&&Oe(n);Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){var t=c?c.call(e):n;return le.target&&(i.depend(),s&&(s.dep.depend(),Array.isArray(t)&&Pe(t))),t},set:function(t){var r=c?c.call(e):n;t===r||t!=t&&r!=r||c&&!u||(u?u.call(e,t):n=t,s=!o&&Oe(t),i.notify())}})}}function Ce(e,t,n){if(Array.isArray(e)&&d(t))return e.length=Math.max(e.length,t),e.splice(t,1,n),n;if(t in e&&!(t in Object.prototype))return e[t]=n,n;var r=e.__ob__;return e._isVue||r&&r.vmCount?n:r?(ke(r.value,t,n),r.dep.notify(),n):(e[t]=n,n)}function Te(e,t){if(Array.isArray(e)&&d(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||w(e,t)&&(delete e[t],n&&n.dep.notify())}}function Pe(e){for(var t=void 0,n=0,r=e.length;n<r;n++)(t=e[n])&&t.__ob__&&t.__ob__.dep.depend(),Array.isArray(t)&&Pe(t)}Ae.prototype.walk=function(e){for(var t=Object.keys(e),n=0;n<t.length;n++)ke(e,t[n])},Ae.prototype.observeArray=function(e){for(var t=0,n=e.length;t<n;t++)Oe(e[t])};var $e=F.optionMergeStrategies;function je(e,t){if(!t)return e;for(var n,r,o,i=ue?Reflect.ownKeys(t):Object.keys(t),a=0;a<i.length;a++)"__ob__"!==(n=i[a])&&(r=e[n],o=t[n],w(e,n)?r!==o&&l(r)&&l(o)&&je(r,o):Ce(e,n,o));return e}function Le(e,t,n){return n?function(){var r="function"==typeof t?t.call(n,n):t,o="function"==typeof e?e.call(n,n):e;return r?je(r,o):o}:t?e?function(){return je("function"==typeof t?t.call(this,this):t,"function"==typeof e?e.call(this,this):e)}:t:e}function Ie(e,t){var n=t?e?e.concat(t):Array.isArray(t)?t:[t]:e;return n?function(e){for(var t=[],n=0;n<e.length;n++)-1===t.indexOf(e[n])&&t.push(e[n]);return t}(n):n}function Re(e,t,n,r){var o=Object.create(e||null);return t?P(o,t):o}$e.data=function(e,t,n){return n?Le(e,t,n):t&&"function"!=typeof t?e:Le(e,t)},N.forEach((function(e){$e[e]=Ie})),B.forEach((function(e){$e[e+"s"]=Re})),$e.watch=function(e,t,n,r){if(e===te&&(e=void 0),t===te&&(t=void 0),!t)return Object.create(e||null);if(!e)return t;var o={};for(var i in P(o,e),t){var a=o[i],c=t[i];a&&!Array.isArray(a)&&(a=[a]),o[i]=a?a.concat(c):Array.isArray(c)?c:[c]}return o},$e.props=$e.methods=$e.inject=$e.computed=function(e,t,n,r){if(!e)return t;var o=Object.create(null);return P(o,e),t&&P(o,t),o},$e.provide=Le;var Me=function(e,t){return void 0===t?e:t};function De(e,t,n){if("function"==typeof t&&(t=t.options),function(e,t){var n=e.props;if(n){var r,o,i={};if(Array.isArray(n))for(r=n.length;r--;)"string"==typeof(o=n[r])&&(i[E(o)]={type:null});else if(l(n))for(var a in n)o=n[a],i[E(a)]=l(o)?o:{type:o};else 0;e.props=i}}(t),function(e,t){var n=e.inject;if(n){var r=e.inject={};if(Array.isArray(n))for(var o=0;o<n.length;o++)r[n[o]]={from:n[o]};else if(l(n))for(var i in n){var a=n[i];r[i]=l(a)?P({from:i},a):{from:a}}else 0}}(t),function(e){var t=e.directives;if(t)for(var n in t){var r=t[n];"function"==typeof r&&(t[n]={bind:r,update:r})}}(t),!t._base&&(t.extends&&(e=De(e,t.extends,n)),t.mixins))for(var r=0,o=t.mixins.length;r<o;r++)e=De(e,t.mixins[r],n);var i,a={};for(i in e)c(i);for(i in t)w(e,i)||c(i);function c(r){var o=$e[r]||Me;a[r]=o(e[r],t[r],n,r)}return a}function Be(e,t,n,r){if("string"==typeof n){var o=e[t];if(w(o,n))return o[n];var i=E(n);if(w(o,i))return o[i];var a=A(i);return w(o,a)?o[a]:o[n]||o[i]||o[a]}}function Ne(e,t,n,r){var o=t[e],i=!w(n,e),a=n[e],c=We(Boolean,o.type);if(c>-1)if(i&&!w(o,"default"))a=!1;else if(""===a||a===k(e)){var u=We(String,o.type);(u<0||c<u)&&(a=!0)}if(void 0===a){a=function(e,t,n){if(!w(t,"default"))return;var r=t.default;0;if(e&&e.$options.propsData&&void 0===e.$options.propsData[n]&&void 0!==e._props[n])return e._props[n];return"function"==typeof r&&"Function"!==Fe(t.type)?r.call(e):r}(r,o,e);var s=Se;Ee(!0),Oe(a),Ee(s)}return a}function Fe(e){var t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:""}function Ue(e,t){return Fe(e)===Fe(t)}function We(e,t){if(!Array.isArray(t))return Ue(t,e)?0:-1;for(var n=0,r=t.length;n<r;n++)if(Ue(t[n],e))return n;return-1}function Ve(e,t,n){de();try{if(t)for(var r=t;r=r.$parent;){var o=r.$options.errorCaptured;if(o)for(var i=0;i<o.length;i++)try{if(!1===o[i].call(r,e,t,n))return}catch(e){ze(e,r,"errorCaptured hook")}}ze(e,t,n)}finally{_e()}}function He(e,t,n,r,o){var i;try{(i=n?e.apply(t,n):e.call(t))&&!i._isVue&&_(i)&&!i._handled&&(i.catch((function(e){return Ve(e,r,o+" (Promise/async)")})),i._handled=!0)}catch(e){Ve(e,r,o)}return i}function ze(e,t,n){if(F.errorHandler)try{return F.errorHandler.call(null,e,t,n)}catch(t){t!==e&&qe(t,null,"config.errorHandler")}qe(e,t,n)}function qe(e,t,n){if(!q&&!G||"undefined"==typeof console)throw e;console.error(e)}var Ge,Ke=!1,Ze=[],Xe=!1;function Ye(){Xe=!1;var e=Ze.slice(0);Ze.length=0;for(var t=0;t<e.length;t++)e[t]()}if("undefined"!=typeof Promise&&ae(Promise)){var Qe=Promise.resolve();Ge=function(){Qe.then(Ye),J&&setTimeout(j)},Ke=!0}else if(X||"undefined"==typeof MutationObserver||!ae(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())Ge="undefined"!=typeof setImmediate&&ae(setImmediate)?function(){setImmediate(Ye)}:function(){setTimeout(Ye,0)};else{var Je=1,et=new MutationObserver(Ye),tt=document.createTextNode(String(Je));et.observe(tt,{characterData:!0}),Ge=function(){Je=(Je+1)%2,tt.data=String(Je)},Ke=!0}function nt(e,t){var n;if(Ze.push((function(){if(e)try{e.call(t)}catch(e){Ve(e,t,"nextTick")}else n&&n(t)})),Xe||(Xe=!0,Ge()),!e&&"undefined"!=typeof Promise)return new Promise((function(e){n=e}))}var rt=new ce;function ot(e){!function e(t,n){var r,o,i=Array.isArray(t);if(!i&&!s(t)||Object.isFrozen(t)||t instanceof ge)return;if(t.__ob__){var a=t.__ob__.dep.id;if(n.has(a))return;n.add(a)}if(i)for(r=t.length;r--;)e(t[r],n);else for(o=Object.keys(t),r=o.length;r--;)e(t[o[r]],n)}(e,rt),rt.clear()}var it=x((function(e){var t="&"===e.charAt(0),n="~"===(e=t?e.slice(1):e).charAt(0),r="!"===(e=n?e.slice(1):e).charAt(0);return{name:e=r?e.slice(1):e,once:n,capture:r,passive:t}}));function at(e,t){function n(){var e=arguments,r=n.fns;if(!Array.isArray(r))return He(r,null,arguments,t,"v-on handler");for(var o=r.slice(),i=0;i<o.length;i++)He(o[i],null,e,t,"v-on handler")}return n.fns=e,n}function ct(e,t,n,r,o,a){var u,s,f,l;for(u in e)s=e[u],f=t[u],l=it(u),i(s)||(i(f)?(i(s.fns)&&(s=e[u]=at(s,a)),c(l.once)&&(s=e[u]=o(l.name,s,l.capture)),n(l.name,s,l.capture,l.passive,l.params)):s!==f&&(f.fns=s,e[u]=f));for(u in t)i(e[u])&&r((l=it(u)).name,t[u],l.capture)}function ut(e,t,n){var r;e instanceof ge&&(e=e.data.hook||(e.data.hook={}));var o=e[t];function u(){n.apply(this,arguments),v(r.fns,u)}i(o)?r=at([u]):a(o.fns)&&c(o.merged)?(r=o).fns.push(u):r=at([o,u]),r.merged=!0,e[t]=r}function st(e,t,n,r,o){if(a(t)){if(w(t,n))return e[n]=t[n],o||delete t[n],!0;if(w(t,r))return e[n]=t[r],o||delete t[r],!0}return!1}function ft(e){return u(e)?[me(e)]:Array.isArray(e)?function e(t,n){var r,o,s,f,l=[];for(r=0;r<t.length;r++)i(o=t[r])||"boolean"==typeof o||(s=l.length-1,f=l[s],Array.isArray(o)?o.length>0&&(lt((o=e(o,(n||"")+"_"+r))[0])&&lt(f)&&(l[s]=me(f.text+o[0].text),o.shift()),l.push.apply(l,o)):u(o)?lt(f)?l[s]=me(f.text+o):""!==o&&l.push(me(o)):lt(o)&&lt(f)?l[s]=me(f.text+o.text):(c(t._isVList)&&a(o.tag)&&i(o.key)&&a(n)&&(o.key="__vlist"+n+"_"+r+"__"),l.push(o)));return l}(e):void 0}function lt(e){return a(e)&&a(e.text)&&!1===e.isComment}function pt(e,t){if(e){for(var n=Object.create(null),r=ue?Reflect.ownKeys(e):Object.keys(e),o=0;o<r.length;o++){var i=r[o];if("__ob__"!==i){for(var a=e[i].from,c=t;c;){if(c._provided&&w(c._provided,a)){n[i]=c._provided[a];break}c=c.$parent}if(!c)if("default"in e[i]){var u=e[i].default;n[i]="function"==typeof u?u.call(t):u}else 0}}return n}}function dt(e,t){if(!e||!e.length)return{};for(var n={},r=0,o=e.length;r<o;r++){var i=e[r],a=i.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,i.context!==t&&i.fnContext!==t||!a||null==a.slot)(n.default||(n.default=[])).push(i);else{var c=a.slot,u=n[c]||(n[c]=[]);"template"===i.tag?u.push.apply(u,i.children||[]):u.push(i)}}for(var s in n)n[s].every(_t)&&delete n[s];return n}function _t(e){return e.isComment&&!e.asyncFactory||" "===e.text}function gt(e,t,n){var r,i=Object.keys(t).length>0,a=e?!!e.$stable:!i,c=e&&e.$key;if(e){if(e._normalized)return e._normalized;if(a&&n&&n!==o&&c===n.$key&&!i&&!n.$hasNormal)return n;for(var u in r={},e)e[u]&&"$"!==u[0]&&(r[u]=bt(t,u,e[u]))}else r={};for(var s in t)s in r||(r[s]=ht(t,s));return e&&Object.isExtensible(e)&&(e._normalized=r),W(r,"$stable",a),W(r,"$key",c),W(r,"$hasNormal",i),r}function bt(e,t,n){var r=function(){var e=arguments.length?n.apply(null,arguments):n({});return(e=e&&"object"==typeof e&&!Array.isArray(e)?[e]:ft(e))&&(0===e.length||1===e.length&&e[0].isComment)?void 0:e};return n.proxy&&Object.defineProperty(e,t,{get:r,enumerable:!0,configurable:!0}),r}function ht(e,t){return function(){return e[t]}}function mt(e,t){var n,r,o,i,c;if(Array.isArray(e)||"string"==typeof e)for(n=new Array(e.length),r=0,o=e.length;r<o;r++)n[r]=t(e[r],r);else if("number"==typeof e)for(n=new Array(e),r=0;r<e;r++)n[r]=t(r+1,r);else if(s(e))if(ue&&e[Symbol.iterator]){n=[];for(var u=e[Symbol.iterator](),f=u.next();!f.done;)n.push(t(f.value,n.length)),f=u.next()}else for(i=Object.keys(e),n=new Array(i.length),r=0,o=i.length;r<o;r++)c=i[r],n[r]=t(e[c],c,r);return a(n)||(n=[]),n._isVList=!0,n}function vt(e,t,n,r){var o,i=this.$scopedSlots[e];i?(n=n||{},r&&(n=P(P({},r),n)),o=i(n)||t):o=this.$slots[e]||t;var a=n&&n.slot;return a?this.$createElement("template",{slot:a},o):o}function yt(e){return Be(this.$options,"filters",e)||I}function wt(e,t){return Array.isArray(e)?-1===e.indexOf(t):e!==t}function xt(e,t,n,r,o){var i=F.keyCodes[t]||n;return o&&r&&!F.keyCodes[t]?wt(o,r):i?wt(i,e):r?k(r)!==t:void 0}function St(e,t,n,r,o){if(n)if(s(n)){var i;Array.isArray(n)&&(n=$(n));var a=function(a){if("class"===a||"style"===a||m(a))i=e;else{var c=e.attrs&&e.attrs.type;i=r||F.mustUseProp(t,c,a)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var u=E(a),s=k(a);u in i||s in i||(i[a]=n[a],o&&((e.on||(e.on={}))["update:"+a]=function(e){n[a]=e}))};for(var c in n)a(c)}else;return e}function Et(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t||Ot(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,null,this),"__static__"+e,!1),r}function At(e,t,n){return Ot(e,"__once__"+t+(n?"_"+n:""),!0),e}function Ot(e,t,n){if(Array.isArray(e))for(var r=0;r<e.length;r++)e[r]&&"string"!=typeof e[r]&&kt(e[r],t+"_"+r,n);else kt(e,t,n)}function kt(e,t,n){e.isStatic=!0,e.key=t,e.isOnce=n}function Ct(e,t){if(t)if(l(t)){var n=e.on=e.on?P({},e.on):{};for(var r in t){var o=n[r],i=t[r];n[r]=o?[].concat(o,i):i}}else;return e}function Tt(e,t,n,r){t=t||{$stable:!n};for(var o=0;o<e.length;o++){var i=e[o];Array.isArray(i)?Tt(i,t,n):i&&(i.proxy&&(i.fn.proxy=!0),t[i.key]=i.fn)}return r&&(t.$key=r),t}function Pt(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}function $t(e,t){return"string"==typeof e?t+e:e}function jt(e){e._o=At,e._n=b,e._s=g,e._l=mt,e._t=vt,e._q=R,e._i=M,e._m=Et,e._f=yt,e._k=xt,e._b=St,e._v=me,e._e=he,e._u=Tt,e._g=Ct,e._d=Pt,e._p=$t}function Lt(e,t,n,r,i){var a,u=this,s=i.options;w(r,"_uid")?(a=Object.create(r))._original=r:(a=r,r=r._original);var f=c(s._compiled),l=!f;this.data=e,this.props=t,this.children=n,this.parent=r,this.listeners=e.on||o,this.injections=pt(s.inject,r),this.slots=function(){return u.$slots||gt(e.scopedSlots,u.$slots=dt(n,r)),u.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return gt(e.scopedSlots,this.slots())}}),f&&(this.$options=s,this.$slots=this.slots(),this.$scopedSlots=gt(e.scopedSlots,this.$slots)),s._scopeId?this._c=function(e,t,n,o){var i=Ft(a,e,t,n,o,l);return i&&!Array.isArray(i)&&(i.fnScopeId=s._scopeId,i.fnContext=r),i}:this._c=function(e,t,n,r){return Ft(a,e,t,n,r,l)}}function It(e,t,n,r,o){var i=ve(e);return i.fnContext=n,i.fnOptions=r,t.slot&&((i.data||(i.data={})).slot=t.slot),i}function Rt(e,t){for(var n in t)e[E(n)]=t[n]}jt(Lt.prototype);var Mt={init:function(e,t){if(e.componentInstance&&!e.componentInstance._isDestroyed&&e.data.keepAlive){var n=e;Mt.prepatch(n,n)}else{(e.componentInstance=function(e,t){var n={_isComponent:!0,_parentVnode:e,parent:t},r=e.data.inlineTemplate;a(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new e.componentOptions.Ctor(n)}(e,Xt)).$mount(t?e.elm:void 0,t)}},prepatch:function(e,t){var n=t.componentOptions;!function(e,t,n,r,i){0;var a=r.data.scopedSlots,c=e.$scopedSlots,u=!!(a&&!a.$stable||c!==o&&!c.$stable||a&&e.$scopedSlots.$key!==a.$key),s=!!(i||e.$options._renderChildren||u);e.$options._parentVnode=r,e.$vnode=r,e._vnode&&(e._vnode.parent=r);if(e.$options._renderChildren=i,e.$attrs=r.data.attrs||o,e.$listeners=n||o,t&&e.$options.props){Ee(!1);for(var f=e._props,l=e.$options._propKeys||[],p=0;p<l.length;p++){var d=l[p],_=e.$options.props;f[d]=Ne(d,_,t,e)}Ee(!0),e.$options.propsData=t}n=n||o;var g=e.$options._parentListeners;e.$options._parentListeners=n,Zt(e,n,g),s&&(e.$slots=dt(i,r.context),e.$forceUpdate());0}(t.componentInstance=e.componentInstance,n.propsData,n.listeners,t,n.children)},insert:function(e){var t,n=e.context,r=e.componentInstance;r._isMounted||(r._isMounted=!0,en(r,"mounted")),e.data.keepAlive&&(n._isMounted?((t=r)._inactive=!1,nn.push(t)):Jt(r,!0))},destroy:function(e){var t=e.componentInstance;t._isDestroyed||(e.data.keepAlive?function e(t,n){if(n&&(t._directInactive=!0,Qt(t)))return;if(!t._inactive){t._inactive=!0;for(var r=0;r<t.$children.length;r++)e(t.$children[r]);en(t,"deactivated")}}(t,!0):t.$destroy())}},Dt=Object.keys(Mt);function Bt(e,t,n,r,u){if(!i(e)){var f=n.$options._base;if(s(e)&&(e=f.extend(e)),"function"==typeof e){var l;if(i(e.cid)&&void 0===(e=function(e,t){if(c(e.error)&&a(e.errorComp))return e.errorComp;if(a(e.resolved))return e.resolved;var n=Wt;n&&a(e.owners)&&-1===e.owners.indexOf(n)&&e.owners.push(n);if(c(e.loading)&&a(e.loadingComp))return e.loadingComp;if(n&&!a(e.owners)){var r=e.owners=[n],o=!0,u=null,f=null;n.$on("hook:destroyed",(function(){return v(r,n)}));var l=function(e){for(var t=0,n=r.length;t<n;t++)r[t].$forceUpdate();e&&(r.length=0,null!==u&&(clearTimeout(u),u=null),null!==f&&(clearTimeout(f),f=null))},p=D((function(n){e.resolved=Vt(n,t),o?r.length=0:l(!0)})),d=D((function(t){a(e.errorComp)&&(e.error=!0,l(!0))})),g=e(p,d);return s(g)&&(_(g)?i(e.resolved)&&g.then(p,d):_(g.component)&&(g.component.then(p,d),a(g.error)&&(e.errorComp=Vt(g.error,t)),a(g.loading)&&(e.loadingComp=Vt(g.loading,t),0===g.delay?e.loading=!0:u=setTimeout((function(){u=null,i(e.resolved)&&i(e.error)&&(e.loading=!0,l(!1))}),g.delay||200)),a(g.timeout)&&(f=setTimeout((function(){f=null,i(e.resolved)&&d(null)}),g.timeout)))),o=!1,e.loading?e.loadingComp:e.resolved}}(l=e,f)))return function(e,t,n,r,o){var i=he();return i.asyncFactory=e,i.asyncMeta={data:t,context:n,children:r,tag:o},i}(l,t,n,r,u);t=t||{},Sn(e),a(t.model)&&function(e,t){var n=e.model&&e.model.prop||"value",r=e.model&&e.model.event||"input";(t.attrs||(t.attrs={}))[n]=t.model.value;var o=t.on||(t.on={}),i=o[r],c=t.model.callback;a(i)?(Array.isArray(i)?-1===i.indexOf(c):i!==c)&&(o[r]=[c].concat(i)):o[r]=c}(e.options,t);var p=function(e,t,n){var r=t.options.props;if(!i(r)){var o={},c=e.attrs,u=e.props;if(a(c)||a(u))for(var s in r){var f=k(s);st(o,u,s,f,!0)||st(o,c,s,f,!1)}return o}}(t,e);if(c(e.options.functional))return function(e,t,n,r,i){var c=e.options,u={},s=c.props;if(a(s))for(var f in s)u[f]=Ne(f,s,t||o);else a(n.attrs)&&Rt(u,n.attrs),a(n.props)&&Rt(u,n.props);var l=new Lt(n,u,i,r,e),p=c.render.call(null,l._c,l);if(p instanceof ge)return It(p,n,l.parent,c,l);if(Array.isArray(p)){for(var d=ft(p)||[],_=new Array(d.length),g=0;g<d.length;g++)_[g]=It(d[g],n,l.parent,c,l);return _}}(e,p,t,n,r);var d=t.on;if(t.on=t.nativeOn,c(e.options.abstract)){var g=t.slot;t={},g&&(t.slot=g)}!function(e){for(var t=e.hook||(e.hook={}),n=0;n<Dt.length;n++){var r=Dt[n],o=t[r],i=Mt[r];o===i||o&&o._merged||(t[r]=o?Nt(i,o):i)}}(t);var b=e.options.name||u;return new ge("vue-component-"+e.cid+(b?"-"+b:""),t,void 0,void 0,void 0,n,{Ctor:e,propsData:p,listeners:d,tag:u,children:r},l)}}}function Nt(e,t){var n=function(n,r){e(n,r),t(n,r)};return n._merged=!0,n}function Ft(e,t,n,r,o,f){return(Array.isArray(n)||u(n))&&(o=r,r=n,n=void 0),c(f)&&(o=2),function(e,t,n,r,o){if(a(n)&&a(n.__ob__))return he();a(n)&&a(n.is)&&(t=n.is);if(!t)return he();0;Array.isArray(r)&&"function"==typeof r[0]&&((n=n||{}).scopedSlots={default:r[0]},r.length=0);2===o?r=ft(r):1===o&&(r=function(e){for(var t=0;t<e.length;t++)if(Array.isArray(e[t]))return Array.prototype.concat.apply([],e);return e}(r));var u,f;if("string"==typeof t){var l;f=e.$vnode&&e.$vnode.ns||F.getTagNamespace(t),u=F.isReservedTag(t)?new ge(F.parsePlatformTagName(t),n,r,void 0,void 0,e):n&&n.pre||!a(l=Be(e.$options,"components",t))?new ge(t,n,r,void 0,void 0,e):Bt(l,n,e,r,t)}else u=Bt(t,n,e,r);return Array.isArray(u)?u:a(u)?(a(f)&&function e(t,n,r){t.ns=n,"foreignObject"===t.tag&&(n=void 0,r=!0);if(a(t.children))for(var o=0,u=t.children.length;o<u;o++){var s=t.children[o];a(s.tag)&&(i(s.ns)||c(r)&&"svg"!==s.tag)&&e(s,n,r)}}(u,f),a(n)&&function(e){s(e.style)&&ot(e.style);s(e.class)&&ot(e.class)}(n),u):he()}(e,t,n,r,o)}var Ut,Wt=null;function Vt(e,t){return(e.__esModule||ue&&"Module"===e[Symbol.toStringTag])&&(e=e.default),s(e)?t.extend(e):e}function Ht(e){return e.isComment&&e.asyncFactory}function zt(e){if(Array.isArray(e))for(var t=0;t<e.length;t++){var n=e[t];if(a(n)&&(a(n.componentOptions)||Ht(n)))return n}}function qt(e,t){Ut.$on(e,t)}function Gt(e,t){Ut.$off(e,t)}function Kt(e,t){var n=Ut;return function r(){var o=t.apply(null,arguments);null!==o&&n.$off(e,r)}}function Zt(e,t,n){Ut=e,ct(t,n||{},qt,Gt,Kt,e),Ut=void 0}var Xt=null;function Yt(e){var t=Xt;return Xt=e,function(){Xt=t}}function Qt(e){for(;e&&(e=e.$parent);)if(e._inactive)return!0;return!1}function Jt(e,t){if(t){if(e._directInactive=!1,Qt(e))return}else if(e._directInactive)return;if(e._inactive||null===e._inactive){e._inactive=!1;for(var n=0;n<e.$children.length;n++)Jt(e.$children[n]);en(e,"activated")}}function en(e,t){de();var n=e.$options[t],r=t+" hook";if(n)for(var o=0,i=n.length;o<i;o++)He(n[o],e,null,e,r);e._hasHookEvent&&e.$emit("hook:"+t),_e()}var tn=[],nn=[],rn={},on=!1,an=!1,cn=0;var un=0,sn=Date.now;if(q&&!X){var fn=window.performance;fn&&"function"==typeof fn.now&&sn()>document.createEvent("Event").timeStamp&&(sn=function(){return fn.now()})}function ln(){var e,t;for(un=sn(),an=!0,tn.sort((function(e,t){return e.id-t.id})),cn=0;cn<tn.length;cn++)(e=tn[cn]).before&&e.before(),t=e.id,rn[t]=null,e.run();var n=nn.slice(),r=tn.slice();cn=tn.length=nn.length=0,rn={},on=an=!1,function(e){for(var t=0;t<e.length;t++)e[t]._inactive=!0,Jt(e[t],!0)}(n),function(e){var t=e.length;for(;t--;){var n=e[t],r=n.vm;r._watcher===n&&r._isMounted&&!r._isDestroyed&&en(r,"updated")}}(r),ie&&F.devtools&&ie.emit("flush")}var pn=0,dn=function(e,t,n,r,o){this.vm=e,o&&(e._watcher=this),e._watchers.push(this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++pn,this.active=!0,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new ce,this.newDepIds=new ce,this.expression="","function"==typeof t?this.getter=t:(this.getter=function(e){if(!V.test(e)){var t=e.split(".");return function(e){for(var n=0;n<t.length;n++){if(!e)return;e=e[t[n]]}return e}}}(t),this.getter||(this.getter=j)),this.value=this.lazy?void 0:this.get()};dn.prototype.get=function(){var e;de(this);var t=this.vm;try{e=this.getter.call(t,t)}catch(e){if(!this.user)throw e;Ve(e,t,'getter for watcher "'+this.expression+'"')}finally{this.deep&&ot(e),_e(),this.cleanupDeps()}return e},dn.prototype.addDep=function(e){var t=e.id;this.newDepIds.has(t)||(this.newDepIds.add(t),this.newDeps.push(e),this.depIds.has(t)||e.addSub(this))},dn.prototype.cleanupDeps=function(){for(var e=this.deps.length;e--;){var t=this.deps[e];this.newDepIds.has(t.id)||t.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},dn.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():function(e){var t=e.id;if(null==rn[t]){if(rn[t]=!0,an){for(var n=tn.length-1;n>cn&&tn[n].id>e.id;)n--;tn.splice(n+1,0,e)}else tn.push(e);on||(on=!0,nt(ln))}}(this)},dn.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||s(e)||this.deep){var t=this.value;if(this.value=e,this.user)try{this.cb.call(this.vm,e,t)}catch(e){Ve(e,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,e,t)}}},dn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},dn.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},dn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||v(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var _n={enumerable:!0,configurable:!0,get:j,set:j};function gn(e,t,n){_n.get=function(){return this[t][n]},_n.set=function(e){this[t][n]=e},Object.defineProperty(e,n,_n)}function bn(e){e._watchers=[];var t=e.$options;t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props={},o=e.$options._propKeys=[];e.$parent&&Ee(!1);var i=function(i){o.push(i);var a=Ne(i,t,n,e);ke(r,i,a),i in e||gn(e,"_props",i)};for(var a in t)i(a);Ee(!0)}(e,t.props),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?j:C(t[n],e)}(e,t.methods),t.data?function(e){var t=e.$options.data;l(t=e._data="function"==typeof t?function(e,t){de();try{return e.call(t,t)}catch(e){return Ve(e,t,"data()"),{}}finally{_e()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,o=(e.$options.methods,n.length);for(;o--;){var i=n[o];0,r&&w(r,i)||(a=void 0,36!==(a=(i+"").charCodeAt(0))&&95!==a&&gn(e,"_data",i))}var a;Oe(t,!0)}(e):Oe(e._data={},!0),t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=oe();for(var o in t){var i=t[o],a="function"==typeof i?i:i.get;0,r||(n[o]=new dn(e,a||j,j,hn)),o in e||mn(e,o,i)}}(e,t.computed),t.watch&&t.watch!==te&&function(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var o=0;o<r.length;o++)wn(e,n,r[o]);else wn(e,n,r)}}(e,t.watch)}var hn={lazy:!0};function mn(e,t,n){var r=!oe();"function"==typeof n?(_n.get=r?vn(t):yn(n),_n.set=j):(_n.get=n.get?r&&!1!==n.cache?vn(t):yn(n.get):j,_n.set=n.set||j),Object.defineProperty(e,t,_n)}function vn(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),le.target&&t.depend(),t.value}}function yn(e){return function(){return e.call(this,this)}}function wn(e,t,n,r){return l(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=e[n]),e.$watch(t,n,r)}var xn=0;function Sn(e){var t=e.options;if(e.super){var n=Sn(e.super);if(n!==e.superOptions){e.superOptions=n;var r=function(e){var t,n=e.options,r=e.sealedOptions;for(var o in n)n[o]!==r[o]&&(t||(t={}),t[o]=n[o]);return t}(e);r&&P(e.extendOptions,r),(t=e.options=De(n,e.extendOptions)).name&&(t.components[t.name]=e)}}return t}function En(e){this._init(e)}function An(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,o=e._Ctor||(e._Ctor={});if(o[r])return o[r];var i=e.name||n.options.name;var a=function(e){this._init(e)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=t++,a.options=De(n.options,e),a.super=n,a.options.props&&function(e){var t=e.options.props;for(var n in t)gn(e.prototype,"_props",n)}(a),a.options.computed&&function(e){var t=e.options.computed;for(var n in t)mn(e.prototype,n,t[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,B.forEach((function(e){a[e]=n[e]})),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=P({},a.options),o[r]=a,a}}function On(e){return e&&(e.Ctor.options.name||e.tag)}function kn(e,t){return Array.isArray(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!p(e)&&e.test(t)}function Cn(e,t){var n=e.cache,r=e.keys,o=e._vnode;for(var i in n){var a=n[i];if(a){var c=On(a.componentOptions);c&&!t(c)&&Tn(n,i,r,o)}}}function Tn(e,t,n,r){var o=e[t];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),e[t]=null,v(n,t)}En.prototype._init=function(e){var t=this;t._uid=xn++,t._isVue=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=De(Sn(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&Zt(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,r=n&&n.context;e.$slots=dt(t._renderChildren,r),e.$scopedSlots=o,e._c=function(t,n,r,o){return Ft(e,t,n,r,o,!1)},e.$createElement=function(t,n,r,o){return Ft(e,t,n,r,o,!0)};var i=n&&n.data;ke(e,"$attrs",i&&i.attrs||o,null,!0),ke(e,"$listeners",t._parentListeners||o,null,!0)}(t),en(t,"beforeCreate"),function(e){var t=pt(e.$options.inject,e);t&&(Ee(!1),Object.keys(t).forEach((function(n){ke(e,n,t[n])})),Ee(!0))}(t),bn(t),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(t),en(t,"created"),t.$options.el&&t.$mount(t.$options.el)},function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=Ce,e.prototype.$delete=Te,e.prototype.$watch=function(e,t,n){if(l(t))return wn(this,e,t,n);(n=n||{}).user=!0;var r=new dn(this,e,t,n);if(n.immediate)try{t.call(this,r.value)}catch(e){Ve(e,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}}(En),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var r=this;if(Array.isArray(e))for(var o=0,i=e.length;o<i;o++)r.$on(e[o],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r},e.prototype.$once=function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n},e.prototype.$off=function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(e)){for(var r=0,o=e.length;r<o;r++)n.$off(e[r],t);return n}var i,a=n._events[e];if(!a)return n;if(!t)return n._events[e]=null,n;for(var c=a.length;c--;)if((i=a[c])===t||i.fn===t){a.splice(c,1);break}return n},e.prototype.$emit=function(e){var t=this,n=t._events[e];if(n){n=n.length>1?T(n):n;for(var r=T(arguments,1),o='event handler for "'+e+'"',i=0,a=n.length;i<a;i++)He(n[i],t,r,t,o)}return t}}(En),function(e){e.prototype._update=function(e,t){var n=this,r=n.$el,o=n._vnode,i=Yt(n);n._vnode=e,n.$el=o?n.__patch__(o,e):n.__patch__(n.$el,e,t,!1),i(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)},e.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},e.prototype.$destroy=function(){var e=this;if(!e._isBeingDestroyed){en(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||v(t.$children,e),e._watcher&&e._watcher.teardown();for(var n=e._watchers.length;n--;)e._watchers[n].teardown();e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),en(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}}(En),function(e){jt(e.prototype),e.prototype.$nextTick=function(e){return nt(e,this)},e.prototype._render=function(){var e,t=this,n=t.$options,r=n.render,o=n._parentVnode;o&&(t.$scopedSlots=gt(o.data.scopedSlots,t.$slots,t.$scopedSlots)),t.$vnode=o;try{Wt=t,e=r.call(t._renderProxy,t.$createElement)}catch(n){Ve(n,t,"render"),e=t._vnode}finally{Wt=null}return Array.isArray(e)&&1===e.length&&(e=e[0]),e instanceof ge||(e=he()),e.parent=o,e}}(En);var Pn=[String,RegExp,Array],$n={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:Pn,exclude:Pn,max:[String,Number]},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)Tn(this.cache,e,this.keys)},mounted:function(){var e=this;this.$watch("include",(function(t){Cn(e,(function(e){return kn(t,e)}))})),this.$watch("exclude",(function(t){Cn(e,(function(e){return!kn(t,e)}))}))},render:function(){var e=this.$slots.default,t=zt(e),n=t&&t.componentOptions;if(n){var r=On(n),o=this.include,i=this.exclude;if(o&&(!r||!kn(o,r))||i&&r&&kn(i,r))return t;var a=this.cache,c=this.keys,u=null==t.key?n.Ctor.cid+(n.tag?"::"+n.tag:""):t.key;a[u]?(t.componentInstance=a[u].componentInstance,v(c,u),c.push(u)):(a[u]=t,c.push(u),this.max&&c.length>parseInt(this.max)&&Tn(a,c[0],c,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return F}};Object.defineProperty(e,"config",t),e.util={warn:se,extend:P,mergeOptions:De,defineReactive:ke},e.set=Ce,e.delete=Te,e.nextTick=nt,e.observable=function(e){return Oe(e),e},e.options=Object.create(null),B.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,P(e.options.components,$n),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=T(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=De(this.options,e),this}}(e),An(e),function(e){B.forEach((function(t){e[t]=function(e,n){return n?("component"===t&&l(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}}))}(e)}(En),Object.defineProperty(En.prototype,"$isServer",{get:oe}),Object.defineProperty(En.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(En,"FunctionalRenderContext",{value:Lt}),En.version="2.6.11";var jn=h("style,class"),Ln=h("input,textarea,option,select,progress"),In=h("contenteditable,draggable,spellcheck"),Rn=h("events,caret,typing,plaintext-only"),Mn=h("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Dn="http://www.w3.org/1999/xlink",Bn=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},Nn=function(e){return Bn(e)?e.slice(6,e.length):""},Fn=function(e){return null==e||!1===e};function Un(e){for(var t=e.data,n=e,r=e;a(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=Wn(r.data,t));for(;a(n=n.parent);)n&&n.data&&(t=Wn(t,n.data));return function(e,t){if(a(e)||a(t))return Vn(e,Hn(t));return""}(t.staticClass,t.class)}function Wn(e,t){return{staticClass:Vn(e.staticClass,t.staticClass),class:a(e.class)?[e.class,t.class]:t.class}}function Vn(e,t){return e?t?e+" "+t:e:t||""}function Hn(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,o=e.length;r<o;r++)a(t=Hn(e[r]))&&""!==t&&(n&&(n+=" "),n+=t);return n}(e):s(e)?function(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}(e):"string"==typeof e?e:""}var zn={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},qn=h("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),Gn=h("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),Kn=function(e){return qn(e)||Gn(e)};var Zn=Object.create(null);var Xn=h("text,number,password,search,email,tel,url");var Yn=Object.freeze({createElement:function(e,t){var n=document.createElement(e);return"select"!==e||t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(e,t){return document.createElementNS(zn[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},setStyleScope:function(e,t){e.setAttribute(t,"")}}),Qn={create:function(e,t){Jn(t)},update:function(e,t){e.data.ref!==t.data.ref&&(Jn(e,!0),Jn(t))},destroy:function(e){Jn(e,!0)}};function Jn(e,t){var n=e.data.ref;if(a(n)){var r=e.context,o=e.componentInstance||e.elm,i=r.$refs;t?Array.isArray(i[n])?v(i[n],o):i[n]===o&&(i[n]=void 0):e.data.refInFor?Array.isArray(i[n])?i[n].indexOf(o)<0&&i[n].push(o):i[n]=[o]:i[n]=o}}var er=new ge("",{},[]),tr=["create","activate","update","remove","destroy"];function nr(e,t){return e.key===t.key&&(e.tag===t.tag&&e.isComment===t.isComment&&a(e.data)===a(t.data)&&function(e,t){if("input"!==e.tag)return!0;var n,r=a(n=e.data)&&a(n=n.attrs)&&n.type,o=a(n=t.data)&&a(n=n.attrs)&&n.type;return r===o||Xn(r)&&Xn(o)}(e,t)||c(e.isAsyncPlaceholder)&&e.asyncFactory===t.asyncFactory&&i(t.asyncFactory.error))}function rr(e,t,n){var r,o,i={};for(r=t;r<=n;++r)a(o=e[r].key)&&(i[o]=r);return i}var or={create:ir,update:ir,destroy:function(e){ir(e,er)}};function ir(e,t){(e.data.directives||t.data.directives)&&function(e,t){var n,r,o,i=e===er,a=t===er,c=cr(e.data.directives,e.context),u=cr(t.data.directives,t.context),s=[],f=[];for(n in u)r=c[n],o=u[n],r?(o.oldValue=r.value,o.oldArg=r.arg,sr(o,"update",t,e),o.def&&o.def.componentUpdated&&f.push(o)):(sr(o,"bind",t,e),o.def&&o.def.inserted&&s.push(o));if(s.length){var l=function(){for(var n=0;n<s.length;n++)sr(s[n],"inserted",t,e)};i?ut(t,"insert",l):l()}f.length&&ut(t,"postpatch",(function(){for(var n=0;n<f.length;n++)sr(f[n],"componentUpdated",t,e)}));if(!i)for(n in c)u[n]||sr(c[n],"unbind",e,e,a)}(e,t)}var ar=Object.create(null);function cr(e,t){var n,r,o=Object.create(null);if(!e)return o;for(n=0;n<e.length;n++)(r=e[n]).modifiers||(r.modifiers=ar),o[ur(r)]=r,r.def=Be(t.$options,"directives",r.name);return o}function ur(e){return e.rawName||e.name+"."+Object.keys(e.modifiers||{}).join(".")}function sr(e,t,n,r,o){var i=e.def&&e.def[t];if(i)try{i(n.elm,e,n,r,o)}catch(r){Ve(r,n.context,"directive "+e.name+" "+t+" hook")}}var fr=[Qn,or];function lr(e,t){var n=t.componentOptions;if(!(a(n)&&!1===n.Ctor.options.inheritAttrs||i(e.data.attrs)&&i(t.data.attrs))){var r,o,c=t.elm,u=e.data.attrs||{},s=t.data.attrs||{};for(r in a(s.__ob__)&&(s=t.data.attrs=P({},s)),s)o=s[r],u[r]!==o&&pr(c,r,o);for(r in(X||Q)&&s.value!==u.value&&pr(c,"value",s.value),u)i(s[r])&&(Bn(r)?c.removeAttributeNS(Dn,Nn(r)):In(r)||c.removeAttribute(r))}}function pr(e,t,n){e.tagName.indexOf("-")>-1?dr(e,t,n):Mn(t)?Fn(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):In(t)?e.setAttribute(t,function(e,t){return Fn(t)||"false"===t?"false":"contenteditable"===e&&Rn(t)?t:"true"}(t,n)):Bn(t)?Fn(n)?e.removeAttributeNS(Dn,Nn(t)):e.setAttributeNS(Dn,t,n):dr(e,t,n)}function dr(e,t,n){if(Fn(n))e.removeAttribute(t);else{if(X&&!Y&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==n&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var _r={create:lr,update:lr};function gr(e,t){var n=t.elm,r=t.data,o=e.data;if(!(i(r.staticClass)&&i(r.class)&&(i(o)||i(o.staticClass)&&i(o.class)))){var c=Un(t),u=n._transitionClasses;a(u)&&(c=Vn(c,Hn(u))),c!==n._prevClass&&(n.setAttribute("class",c),n._prevClass=c)}}var br,hr={create:gr,update:gr};function mr(e,t,n){var r=br;return function o(){var i=t.apply(null,arguments);null!==i&&wr(e,o,n,r)}}var vr=Ke&&!(ee&&Number(ee[1])<=53);function yr(e,t,n,r){if(vr){var o=un,i=t;t=i._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=o||e.timeStamp<=0||e.target.ownerDocument!==document)return i.apply(this,arguments)}}br.addEventListener(e,t,ne?{capture:n,passive:r}:n)}function wr(e,t,n,r){(r||br).removeEventListener(e,t._wrapper||t,n)}function xr(e,t){if(!i(e.data.on)||!i(t.data.on)){var n=t.data.on||{},r=e.data.on||{};br=t.elm,function(e){if(a(e.__r)){var t=X?"change":"input";e[t]=[].concat(e.__r,e[t]||[]),delete e.__r}a(e.__c)&&(e.change=[].concat(e.__c,e.change||[]),delete e.__c)}(n),ct(n,r,yr,wr,mr,t.context),br=void 0}}var Sr,Er={create:xr,update:xr};function Ar(e,t){if(!i(e.data.domProps)||!i(t.data.domProps)){var n,r,o=t.elm,c=e.data.domProps||{},u=t.data.domProps||{};for(n in a(u.__ob__)&&(u=t.data.domProps=P({},u)),c)n in u||(o[n]="");for(n in u){if(r=u[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),r===c[n])continue;1===o.childNodes.length&&o.removeChild(o.childNodes[0])}if("value"===n&&"PROGRESS"!==o.tagName){o._value=r;var s=i(r)?"":String(r);Or(o,s)&&(o.value=s)}else if("innerHTML"===n&&Gn(o.tagName)&&i(o.innerHTML)){(Sr=Sr||document.createElement("div")).innerHTML="<svg>"+r+"</svg>";for(var f=Sr.firstChild;o.firstChild;)o.removeChild(o.firstChild);for(;f.firstChild;)o.appendChild(f.firstChild)}else if(r!==c[n])try{o[n]=r}catch(e){}}}}function Or(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(a(r)){if(r.number)return b(n)!==b(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var kr={create:Ar,update:Ar},Cr=x((function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach((function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}})),t}));function Tr(e){var t=Pr(e.style);return e.staticStyle?P(e.staticStyle,t):t}function Pr(e){return Array.isArray(e)?$(e):"string"==typeof e?Cr(e):e}var $r,jr=/^--/,Lr=/\s*!important$/,Ir=function(e,t,n){if(jr.test(t))e.style.setProperty(t,n);else if(Lr.test(n))e.style.setProperty(k(t),n.replace(Lr,""),"important");else{var r=Mr(t);if(Array.isArray(n))for(var o=0,i=n.length;o<i;o++)e.style[r]=n[o];else e.style[r]=n}},Rr=["Webkit","Moz","ms"],Mr=x((function(e){if($r=$r||document.createElement("div").style,"filter"!==(e=E(e))&&e in $r)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<Rr.length;n++){var r=Rr[n]+t;if(r in $r)return r}}));function Dr(e,t){var n=t.data,r=e.data;if(!(i(n.staticStyle)&&i(n.style)&&i(r.staticStyle)&&i(r.style))){var o,c,u=t.elm,s=r.staticStyle,f=r.normalizedStyle||r.style||{},l=s||f,p=Pr(t.data.style)||{};t.data.normalizedStyle=a(p.__ob__)?P({},p):p;var d=function(e,t){var n,r={};if(t)for(var o=e;o.componentInstance;)(o=o.componentInstance._vnode)&&o.data&&(n=Tr(o.data))&&P(r,n);(n=Tr(e.data))&&P(r,n);for(var i=e;i=i.parent;)i.data&&(n=Tr(i.data))&&P(r,n);return r}(t,!0);for(c in l)i(d[c])&&Ir(u,c,"");for(c in d)(o=d[c])!==l[c]&&Ir(u,c,null==o?"":o)}}var Br={create:Dr,update:Dr},Nr=/\s+/;function Fr(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(Nr).forEach((function(t){return e.classList.add(t)})):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function Ur(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(Nr).forEach((function(t){return e.classList.remove(t)})):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function Wr(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&P(t,Vr(e.name||"v")),P(t,e),t}return"string"==typeof e?Vr(e):void 0}}var Vr=x((function(e){return{enterClass:e+"-enter",enterToClass:e+"-enter-to",enterActiveClass:e+"-enter-active",leaveClass:e+"-leave",leaveToClass:e+"-leave-to",leaveActiveClass:e+"-leave-active"}})),Hr=q&&!Y,zr="transition",qr="transitionend",Gr="animation",Kr="animationend";Hr&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(zr="WebkitTransition",qr="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Gr="WebkitAnimation",Kr="webkitAnimationEnd"));var Zr=q?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function Xr(e){Zr((function(){Zr(e)}))}function Yr(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),Fr(e,t))}function Qr(e,t){e._transitionClasses&&v(e._transitionClasses,t),Ur(e,t)}function Jr(e,t,n){var r=to(e,t),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var c="transition"===o?qr:Kr,u=0,s=function(){e.removeEventListener(c,f),n()},f=function(t){t.target===e&&++u>=a&&s()};setTimeout((function(){u<a&&s()}),i+1),e.addEventListener(c,f)}var eo=/\b(transform|all)(,|$)/;function to(e,t){var n,r=window.getComputedStyle(e),o=(r[zr+"Delay"]||"").split(", "),i=(r[zr+"Duration"]||"").split(", "),a=no(o,i),c=(r[Gr+"Delay"]||"").split(", "),u=(r[Gr+"Duration"]||"").split(", "),s=no(c,u),f=0,l=0;return"transition"===t?a>0&&(n="transition",f=a,l=i.length):"animation"===t?s>0&&(n="animation",f=s,l=u.length):l=(n=(f=Math.max(a,s))>0?a>s?"transition":"animation":null)?"transition"===n?i.length:u.length:0,{type:n,timeout:f,propCount:l,hasTransform:"transition"===n&&eo.test(r[zr+"Property"])}}function no(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max.apply(null,t.map((function(t,n){return ro(t)+ro(e[n])})))}function ro(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}function oo(e,t){var n=e.elm;a(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var r=Wr(e.data.transition);if(!i(r)&&!a(n._enterCb)&&1===n.nodeType){for(var o=r.css,c=r.type,u=r.enterClass,f=r.enterToClass,l=r.enterActiveClass,p=r.appearClass,d=r.appearToClass,_=r.appearActiveClass,g=r.beforeEnter,h=r.enter,m=r.afterEnter,v=r.enterCancelled,y=r.beforeAppear,w=r.appear,x=r.afterAppear,S=r.appearCancelled,E=r.duration,A=Xt,O=Xt.$vnode;O&&O.parent;)A=O.context,O=O.parent;var k=!A._isMounted||!e.isRootInsert;if(!k||w||""===w){var C=k&&p?p:u,T=k&&_?_:l,P=k&&d?d:f,$=k&&y||g,j=k&&"function"==typeof w?w:h,L=k&&x||m,I=k&&S||v,R=b(s(E)?E.enter:E);0;var M=!1!==o&&!Y,B=co(j),N=n._enterCb=D((function(){M&&(Qr(n,P),Qr(n,T)),N.cancelled?(M&&Qr(n,C),I&&I(n)):L&&L(n),n._enterCb=null}));e.data.show||ut(e,"insert",(function(){var t=n.parentNode,r=t&&t._pending&&t._pending[e.key];r&&r.tag===e.tag&&r.elm._leaveCb&&r.elm._leaveCb(),j&&j(n,N)})),$&&$(n),M&&(Yr(n,C),Yr(n,T),Xr((function(){Qr(n,C),N.cancelled||(Yr(n,P),B||(ao(R)?setTimeout(N,R):Jr(n,c,N)))}))),e.data.show&&(t&&t(),j&&j(n,N)),M||B||N()}}}function io(e,t){var n=e.elm;a(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var r=Wr(e.data.transition);if(i(r)||1!==n.nodeType)return t();if(!a(n._leaveCb)){var o=r.css,c=r.type,u=r.leaveClass,f=r.leaveToClass,l=r.leaveActiveClass,p=r.beforeLeave,d=r.leave,_=r.afterLeave,g=r.leaveCancelled,h=r.delayLeave,m=r.duration,v=!1!==o&&!Y,y=co(d),w=b(s(m)?m.leave:m);0;var x=n._leaveCb=D((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[e.key]=null),v&&(Qr(n,f),Qr(n,l)),x.cancelled?(v&&Qr(n,u),g&&g(n)):(t(),_&&_(n)),n._leaveCb=null}));h?h(S):S()}function S(){x.cancelled||(!e.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[e.key]=e),p&&p(n),v&&(Yr(n,u),Yr(n,l),Xr((function(){Qr(n,u),x.cancelled||(Yr(n,f),y||(ao(w)?setTimeout(x,w):Jr(n,c,x)))}))),d&&d(n,x),v||y||x())}}function ao(e){return"number"==typeof e&&!isNaN(e)}function co(e){if(i(e))return!1;var t=e.fns;return a(t)?co(Array.isArray(t)?t[0]:t):(e._length||e.length)>1}function uo(e,t){!0!==t.data.show&&oo(t)}var so=function(e){var t,n,r={},o=e.modules,s=e.nodeOps;for(t=0;t<tr.length;++t)for(r[tr[t]]=[],n=0;n<o.length;++n)a(o[n][tr[t]])&&r[tr[t]].push(o[n][tr[t]]);function f(e){var t=s.parentNode(e);a(t)&&s.removeChild(t,e)}function l(e,t,n,o,i,u,f){if(a(e.elm)&&a(u)&&(e=u[f]=ve(e)),e.isRootInsert=!i,!function(e,t,n,o){var i=e.data;if(a(i)){var u=a(e.componentInstance)&&i.keepAlive;if(a(i=i.hook)&&a(i=i.init)&&i(e,!1),a(e.componentInstance))return p(e,t),d(n,e.elm,o),c(u)&&function(e,t,n,o){var i,c=e;for(;c.componentInstance;)if(c=c.componentInstance._vnode,a(i=c.data)&&a(i=i.transition)){for(i=0;i<r.activate.length;++i)r.activate[i](er,c);t.push(c);break}d(n,e.elm,o)}(e,t,n,o),!0}}(e,t,n,o)){var l=e.data,g=e.children,h=e.tag;a(h)?(e.elm=e.ns?s.createElementNS(e.ns,h):s.createElement(h,e),m(e),_(e,g,t),a(l)&&b(e,t),d(n,e.elm,o)):c(e.isComment)?(e.elm=s.createComment(e.text),d(n,e.elm,o)):(e.elm=s.createTextNode(e.text),d(n,e.elm,o))}}function p(e,t){a(e.data.pendingInsert)&&(t.push.apply(t,e.data.pendingInsert),e.data.pendingInsert=null),e.elm=e.componentInstance.$el,g(e)?(b(e,t),m(e)):(Jn(e),t.push(e))}function d(e,t,n){a(e)&&(a(n)?s.parentNode(n)===e&&s.insertBefore(e,t,n):s.appendChild(e,t))}function _(e,t,n){if(Array.isArray(t)){0;for(var r=0;r<t.length;++r)l(t[r],n,e.elm,null,!0,t,r)}else u(e.text)&&s.appendChild(e.elm,s.createTextNode(String(e.text)))}function g(e){for(;e.componentInstance;)e=e.componentInstance._vnode;return a(e.tag)}function b(e,n){for(var o=0;o<r.create.length;++o)r.create[o](er,e);a(t=e.data.hook)&&(a(t.create)&&t.create(er,e),a(t.insert)&&n.push(e))}function m(e){var t;if(a(t=e.fnScopeId))s.setStyleScope(e.elm,t);else for(var n=e;n;)a(t=n.context)&&a(t=t.$options._scopeId)&&s.setStyleScope(e.elm,t),n=n.parent;a(t=Xt)&&t!==e.context&&t!==e.fnContext&&a(t=t.$options._scopeId)&&s.setStyleScope(e.elm,t)}function v(e,t,n,r,o,i){for(;r<=o;++r)l(n[r],i,e,t,!1,n,r)}function y(e){var t,n,o=e.data;if(a(o))for(a(t=o.hook)&&a(t=t.destroy)&&t(e),t=0;t<r.destroy.length;++t)r.destroy[t](e);if(a(t=e.children))for(n=0;n<e.children.length;++n)y(e.children[n])}function w(e,t,n){for(;t<=n;++t){var r=e[t];a(r)&&(a(r.tag)?(x(r),y(r)):f(r.elm))}}function x(e,t){if(a(t)||a(e.data)){var n,o=r.remove.length+1;for(a(t)?t.listeners+=o:t=function(e,t){function n(){0==--n.listeners&&f(e)}return n.listeners=t,n}(e.elm,o),a(n=e.componentInstance)&&a(n=n._vnode)&&a(n.data)&&x(n,t),n=0;n<r.remove.length;++n)r.remove[n](e,t);a(n=e.data.hook)&&a(n=n.remove)?n(e,t):t()}else f(e.elm)}function S(e,t,n,r){for(var o=n;o<r;o++){var i=t[o];if(a(i)&&nr(e,i))return o}}function E(e,t,n,o,u,f){if(e!==t){a(t.elm)&&a(o)&&(t=o[u]=ve(t));var p=t.elm=e.elm;if(c(e.isAsyncPlaceholder))a(t.asyncFactory.resolved)?k(e.elm,t,n):t.isAsyncPlaceholder=!0;else if(c(t.isStatic)&&c(e.isStatic)&&t.key===e.key&&(c(t.isCloned)||c(t.isOnce)))t.componentInstance=e.componentInstance;else{var d,_=t.data;a(_)&&a(d=_.hook)&&a(d=d.prepatch)&&d(e,t);var b=e.children,h=t.children;if(a(_)&&g(t)){for(d=0;d<r.update.length;++d)r.update[d](e,t);a(d=_.hook)&&a(d=d.update)&&d(e,t)}i(t.text)?a(b)&&a(h)?b!==h&&function(e,t,n,r,o){var c,u,f,p=0,d=0,_=t.length-1,g=t[0],b=t[_],h=n.length-1,m=n[0],y=n[h],x=!o;for(0;p<=_&&d<=h;)i(g)?g=t[++p]:i(b)?b=t[--_]:nr(g,m)?(E(g,m,r,n,d),g=t[++p],m=n[++d]):nr(b,y)?(E(b,y,r,n,h),b=t[--_],y=n[--h]):nr(g,y)?(E(g,y,r,n,h),x&&s.insertBefore(e,g.elm,s.nextSibling(b.elm)),g=t[++p],y=n[--h]):nr(b,m)?(E(b,m,r,n,d),x&&s.insertBefore(e,b.elm,g.elm),b=t[--_],m=n[++d]):(i(c)&&(c=rr(t,p,_)),i(u=a(m.key)?c[m.key]:S(m,t,p,_))?l(m,r,e,g.elm,!1,n,d):nr(f=t[u],m)?(E(f,m,r,n,d),t[u]=void 0,x&&s.insertBefore(e,f.elm,g.elm)):l(m,r,e,g.elm,!1,n,d),m=n[++d]);p>_?v(e,i(n[h+1])?null:n[h+1].elm,n,d,h,r):d>h&&w(t,p,_)}(p,b,h,n,f):a(h)?(a(e.text)&&s.setTextContent(p,""),v(p,null,h,0,h.length-1,n)):a(b)?w(b,0,b.length-1):a(e.text)&&s.setTextContent(p,""):e.text!==t.text&&s.setTextContent(p,t.text),a(_)&&a(d=_.hook)&&a(d=d.postpatch)&&d(e,t)}}}function A(e,t,n){if(c(n)&&a(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r<t.length;++r)t[r].data.hook.insert(t[r])}var O=h("attrs,class,staticClass,staticStyle,key");function k(e,t,n,r){var o,i=t.tag,u=t.data,s=t.children;if(r=r||u&&u.pre,t.elm=e,c(t.isComment)&&a(t.asyncFactory))return t.isAsyncPlaceholder=!0,!0;if(a(u)&&(a(o=u.hook)&&a(o=o.init)&&o(t,!0),a(o=t.componentInstance)))return p(t,n),!0;if(a(i)){if(a(s))if(e.hasChildNodes())if(a(o=u)&&a(o=o.domProps)&&a(o=o.innerHTML)){if(o!==e.innerHTML)return!1}else{for(var f=!0,l=e.firstChild,d=0;d<s.length;d++){if(!l||!k(l,s[d],n,r)){f=!1;break}l=l.nextSibling}if(!f||l)return!1}else _(t,s,n);if(a(u)){var g=!1;for(var h in u)if(!O(h)){g=!0,b(t,n);break}!g&&u.class&&ot(u.class)}}else e.data!==t.text&&(e.data=t.text);return!0}return function(e,t,n,o){if(!i(t)){var u,f=!1,p=[];if(i(e))f=!0,l(t,p);else{var d=a(e.nodeType);if(!d&&nr(e,t))E(e,t,p,null,null,o);else{if(d){if(1===e.nodeType&&e.hasAttribute("data-server-rendered")&&(e.removeAttribute("data-server-rendered"),n=!0),c(n)&&k(e,t,p))return A(t,p,!0),e;u=e,e=new ge(s.tagName(u).toLowerCase(),{},[],void 0,u)}var _=e.elm,b=s.parentNode(_);if(l(t,p,_._leaveCb?null:b,s.nextSibling(_)),a(t.parent))for(var h=t.parent,m=g(t);h;){for(var v=0;v<r.destroy.length;++v)r.destroy[v](h);if(h.elm=t.elm,m){for(var x=0;x<r.create.length;++x)r.create[x](er,h);var S=h.data.hook.insert;if(S.merged)for(var O=1;O<S.fns.length;O++)S.fns[O]()}else Jn(h);h=h.parent}a(b)?w([e],0,0):a(e.tag)&&y(e)}}return A(t,p,f),t.elm}a(e)&&y(e)}}({nodeOps:Yn,modules:[_r,hr,Er,kr,Br,q?{create:uo,activate:uo,remove:function(e,t){!0!==e.data.show?io(e,t):t()}}:{}].concat(fr)});Y&&document.addEventListener("selectionchange",(function(){var e=document.activeElement;e&&e.vmodel&&mo(e,"input")}));var fo={inserted:function(e,t,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?ut(n,"postpatch",(function(){fo.componentUpdated(e,t,n)})):lo(e,t,n.context),e._vOptions=[].map.call(e.options,go)):("textarea"===n.tag||Xn(e.type))&&(e._vModifiers=t.modifiers,t.modifiers.lazy||(e.addEventListener("compositionstart",bo),e.addEventListener("compositionend",ho),e.addEventListener("change",ho),Y&&(e.vmodel=!0)))},componentUpdated:function(e,t,n){if("select"===n.tag){lo(e,t,n.context);var r=e._vOptions,o=e._vOptions=[].map.call(e.options,go);if(o.some((function(e,t){return!R(e,r[t])})))(e.multiple?t.value.some((function(e){return _o(e,o)})):t.value!==t.oldValue&&_o(t.value,o))&&mo(e,"change")}}};function lo(e,t,n){po(e,t,n),(X||Q)&&setTimeout((function(){po(e,t,n)}),0)}function po(e,t,n){var r=t.value,o=e.multiple;if(!o||Array.isArray(r)){for(var i,a,c=0,u=e.options.length;c<u;c++)if(a=e.options[c],o)i=M(r,go(a))>-1,a.selected!==i&&(a.selected=i);else if(R(go(a),r))return void(e.selectedIndex!==c&&(e.selectedIndex=c));o||(e.selectedIndex=-1)}}function _o(e,t){return t.every((function(t){return!R(t,e)}))}function go(e){return"_value"in e?e._value:e.value}function bo(e){e.target.composing=!0}function ho(e){e.target.composing&&(e.target.composing=!1,mo(e.target,"input"))}function mo(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function vo(e){return!e.componentInstance||e.data&&e.data.transition?e:vo(e.componentInstance._vnode)}var yo={model:fo,show:{bind:function(e,t,n){var r=t.value,o=(n=vo(n)).data&&n.data.transition,i=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&o?(n.data.show=!0,oo(n,(function(){e.style.display=i}))):e.style.display=r?i:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=vo(n)).data&&n.data.transition?(n.data.show=!0,r?oo(n,(function(){e.style.display=e.__vOriginalDisplay})):io(n,(function(){e.style.display="none"}))):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,o){o||(e.style.display=e.__vOriginalDisplay)}}},wo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function xo(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?xo(zt(t.children)):e}function So(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var o=n._parentListeners;for(var i in o)t[E(i)]=o[i];return t}function Eo(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var Ao=function(e){return e.tag||Ht(e)},Oo=function(e){return"show"===e.name},ko={name:"transition",props:wo,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(Ao)).length){0;var r=this.mode;0;var o=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return o;var i=xo(o);if(!i)return o;if(this._leaving)return Eo(e,o);var a="__transition-"+this._uid+"-";i.key=null==i.key?i.isComment?a+"comment":a+i.tag:u(i.key)?0===String(i.key).indexOf(a)?i.key:a+i.key:i.key;var c=(i.data||(i.data={})).transition=So(this),s=this._vnode,f=xo(s);if(i.data.directives&&i.data.directives.some(Oo)&&(i.data.show=!0),f&&f.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(i,f)&&!Ht(f)&&(!f.componentInstance||!f.componentInstance._vnode.isComment)){var l=f.data.transition=P({},c);if("out-in"===r)return this._leaving=!0,ut(l,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),Eo(e,o);if("in-out"===r){if(Ht(i))return s;var p,d=function(){p()};ut(c,"afterEnter",d),ut(c,"enterCancelled",d),ut(l,"delayLeave",(function(e){p=e}))}}return o}}},Co=P({tag:String,moveClass:String},wo);function To(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Po(e){e.data.newPos=e.elm.getBoundingClientRect()}function $o(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,o=t.top-n.top;if(r||o){e.data.moved=!0;var i=e.elm.style;i.transform=i.WebkitTransform="translate("+r+"px,"+o+"px)",i.transitionDuration="0s"}}delete Co.mode;var jo={Transition:ko,TransitionGroup:{props:Co,beforeMount:function(){var e=this,t=this._update;this._update=function(n,r){var o=Yt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,o(),t.call(e,n,r)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,o=this.$slots.default||[],i=this.children=[],a=So(this),c=0;c<o.length;c++){var u=o[c];if(u.tag)if(null!=u.key&&0!==String(u.key).indexOf("__vlist"))i.push(u),n[u.key]=u,(u.data||(u.data={})).transition=a;else;}if(r){for(var s=[],f=[],l=0;l<r.length;l++){var p=r[l];p.data.transition=a,p.data.pos=p.elm.getBoundingClientRect(),n[p.key]?s.push(p):f.push(p)}this.kept=e(t,null,s),this.removed=f}return e(t,null,i)},updated:function(){var e=this.prevChildren,t=this.moveClass||(this.name||"v")+"-move";e.length&&this.hasMove(e[0].elm,t)&&(e.forEach(To),e.forEach(Po),e.forEach($o),this._reflow=document.body.offsetHeight,e.forEach((function(e){if(e.data.moved){var n=e.elm,r=n.style;Yr(n,t),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(qr,n._moveCb=function e(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(qr,e),n._moveCb=null,Qr(n,t))})}})))},methods:{hasMove:function(e,t){if(!Hr)return!1;if(this._hasMove)return this._hasMove;var n=e.cloneNode();e._transitionClasses&&e._transitionClasses.forEach((function(e){Ur(n,e)})),Fr(n,t),n.style.display="none",this.$el.appendChild(n);var r=to(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};En.config.mustUseProp=function(e,t,n){return"value"===n&&Ln(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},En.config.isReservedTag=Kn,En.config.isReservedAttr=jn,En.config.getTagNamespace=function(e){return Gn(e)?"svg":"math"===e?"math":void 0},En.config.isUnknownElement=function(e){if(!q)return!0;if(Kn(e))return!1;if(e=e.toLowerCase(),null!=Zn[e])return Zn[e];var t=document.createElement(e);return e.indexOf("-")>-1?Zn[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:Zn[e]=/HTMLUnknownElement/.test(t.toString())},P(En.options.directives,yo),P(En.options.components,jo),En.prototype.__patch__=q?so:j,En.prototype.$mount=function(e,t){return function(e,t,n){var r;return e.$el=t,e.$options.render||(e.$options.render=he),en(e,"beforeMount"),r=function(){e._update(e._render(),n)},new dn(e,r,j,{before:function(){e._isMounted&&!e._isDestroyed&&en(e,"beforeUpdate")}},!0),n=!1,null==e.$vnode&&(e._isMounted=!0,en(e,"mounted")),e}(this,e=e&&q?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},q&&setTimeout((function(){F.devtools&&ie&&ie.emit("init",En)}),0);var Lo=En;
 /*!
   * vue-router v3.1.6
   * (c) 2020 Evan You
   * @license MIT
-  */function Io(e){return Object.prototype.toString.call(e).indexOf("Error")>-1}function Ro(e,t){return t instanceof e||t&&(t.name===e.name||t._name===e._name)}function Mo(e,t){for(var n in t)e[n]=t[n];return e}var Do={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(e,t){var n=t.props,r=t.children,o=t.parent,i=t.data;i.routerView=!0;for(var a=o.$createElement,c=n.name,u=o.$route,s=o._routerViewCache||(o._routerViewCache={}),f=0,l=!1;o&&o._routerRoot!==o;){var p=o.$vnode?o.$vnode.data:{};p.routerView&&f++,p.keepAlive&&o._directInactive&&o._inactive&&(l=!0),o=o.$parent}if(i.routerViewDepth=f,l){var d=s[c],_=d&&d.component;return _?(d.configProps&&Bo(_,i,d.route,d.configProps),a(_,i,r)):a()}var g=u.matched[f],b=g&&g.components[c];if(!g||!b)return s[c]=null,a();s[c]={component:b},i.registerRouteInstance=function(e,t){var n=g.instances[c];(t&&n!==e||!t&&n===e)&&(g.instances[c]=t)},(i.hook||(i.hook={})).prepatch=function(e,t){g.instances[c]=t.componentInstance},i.hook.init=function(e){e.data.keepAlive&&e.componentInstance&&e.componentInstance!==g.instances[c]&&(g.instances[c]=e.componentInstance)};var h=g.props&&g.props[c];return h&&(Mo(s[c],{route:u,configProps:h}),Bo(b,i,u,h)),a(b,i,r)}};function Bo(e,t,n,r){var o=t.props=function(e,t){switch(typeof t){case"undefined":return;case"object":return t;case"function":return t(e);case"boolean":return t?e.params:void 0;default:0}}(n,r);if(o){o=t.props=Mo({},o);var i=t.attrs=t.attrs||{};for(var a in o)e.props&&a in e.props||(i[a]=o[a],delete o[a])}}var No=/[!'()*]/g,Fo=function(e){return"%"+e.charCodeAt(0).toString(16)},Uo=/%2C/g,Wo=function(e){return encodeURIComponent(e).replace(No,Fo).replace(Uo,",")},Vo=decodeURIComponent;function Ho(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var n=e.replace(/\+/g," ").split("="),r=Vo(n.shift()),o=n.length>0?Vo(n.join("=")):null;void 0===t[r]?t[r]=o:Array.isArray(t[r])?t[r].push(o):t[r]=[t[r],o]})),t):t}function zo(e){var t=e?Object.keys(e).map((function(t){var n=e[t];if(void 0===n)return"";if(null===n)return Wo(t);if(Array.isArray(n)){var r=[];return n.forEach((function(e){void 0!==e&&(null===e?r.push(Wo(t)):r.push(Wo(t)+"="+Wo(e)))})),r.join("&")}return Wo(t)+"="+Wo(n)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var qo=/\/?$/;function Go(e,t,n,r){var o=r&&r.options.stringifyQuery,i=t.query||{};try{i=Ko(i)}catch(e){}var a={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:i,params:t.params||{},fullPath:Yo(t,o),matched:e?Xo(e):[]};return n&&(a.redirectedFrom=Yo(n,o)),Object.freeze(a)}function Ko(e){if(Array.isArray(e))return e.map(Ko);if(e&&"object"==typeof e){var t={};for(var n in e)t[n]=Ko(e[n]);return t}return e}var Zo=Go(null,{path:"/"});function Xo(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function Yo(e,t){var n=e.path,r=e.query;void 0===r&&(r={});var o=e.hash;return void 0===o&&(o=""),(n||"/")+(t||zo)(r)+o}function Qo(e,t){return t===Zo?e===t:!!t&&(e.path&&t.path?e.path.replace(qo,"")===t.path.replace(qo,"")&&e.hash===t.hash&&Jo(e.query,t.query):!(!e.name||!t.name)&&(e.name===t.name&&e.hash===t.hash&&Jo(e.query,t.query)&&Jo(e.params,t.params)))}function Jo(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var n=Object.keys(e),r=Object.keys(t);return n.length===r.length&&n.every((function(n){var r=e[n],o=t[n];return"object"==typeof r&&"object"==typeof o?Jo(r,o):String(r)===String(o)}))}function ei(e,t,n){var r=e.charAt(0);if("/"===r)return e;if("?"===r||"#"===r)return t+e;var o=t.split("/");n&&o[o.length-1]||o.pop();for(var i=e.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var c=i[a];".."===c?o.pop():"."!==c&&o.push(c)}return""!==o[0]&&o.unshift(""),o.join("/")}function ti(e){return e.replace(/\/\//g,"/")}var ni=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)},ri=hi,oi=si,ii=function(e,t){return li(si(e,t))},ai=li,ci=bi,ui=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function si(e,t){for(var n,r=[],o=0,i=0,a="",c=t&&t.delimiter||"/";null!=(n=ui.exec(e));){var u=n[0],s=n[1],f=n.index;if(a+=e.slice(i,f),i=f+u.length,s)a+=s[1];else{var l=e[i],p=n[2],d=n[3],_=n[4],g=n[5],b=n[6],h=n[7];a&&(r.push(a),a="");var m=null!=p&&null!=l&&l!==p,v="+"===b||"*"===b,y="?"===b||"*"===b,w=n[2]||c,x=_||g;r.push({name:d||o++,prefix:p||"",delimiter:w,optional:y,repeat:v,partial:m,asterisk:!!h,pattern:x?di(x):h?".*":"[^"+pi(w)+"]+?"})}}return i<e.length&&(a+=e.substr(i)),a&&r.push(a),r}function fi(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function li(e){for(var t=new Array(e.length),n=0;n<e.length;n++)"object"==typeof e[n]&&(t[n]=new RegExp("^(?:"+e[n].pattern+")$"));return function(n,r){for(var o="",i=n||{},a=(r||{}).pretty?fi:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var s,f=i[u.name];if(null==f){if(u.optional){u.partial&&(o+=u.prefix);continue}throw new TypeError('Expected "'+u.name+'" to be defined')}if(ni(f)){if(!u.repeat)throw new TypeError('Expected "'+u.name+'" to not repeat, but received `'+JSON.stringify(f)+"`");if(0===f.length){if(u.optional)continue;throw new TypeError('Expected "'+u.name+'" to not be empty')}for(var l=0;l<f.length;l++){if(s=a(f[l]),!t[c].test(s))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(s)+"`");o+=(0===l?u.prefix:u.delimiter)+s}}else{if(s=u.asterisk?encodeURI(f).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):a(f),!t[c].test(s))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+s+'"');o+=u.prefix+s}}else o+=u}return o}}function pi(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function di(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function _i(e,t){return e.keys=t,e}function gi(e){return e.sensitive?"":"i"}function bi(e,t,n){ni(t)||(n=t||n,t=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<e.length;a++){var c=e[a];if("string"==typeof c)i+=pi(c);else{var u=pi(c.prefix),s="(?:"+c.pattern+")";t.push(c),c.repeat&&(s+="(?:"+u+s+")*"),i+=s=c.optional?c.partial?u+"("+s+")?":"(?:"+u+"("+s+"))?":u+"("+s+")"}}var f=pi(n.delimiter||"/"),l=i.slice(-f.length)===f;return r||(i=(l?i.slice(0,-f.length):i)+"(?:"+f+"(?=$))?"),i+=o?"$":r&&l?"":"(?="+f+"|$)",_i(new RegExp("^"+i,gi(n)),t)}function hi(e,t,n){return ni(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return _i(e,t)}(e,t):ni(e)?function(e,t,n){for(var r=[],o=0;o<e.length;o++)r.push(hi(e[o],t,n).source);return _i(new RegExp("(?:"+r.join("|")+")",gi(n)),t)}(e,t,n):function(e,t,n){return bi(si(e,n),t,n)}(e,t,n)}ri.parse=oi,ri.compile=ii,ri.tokensToFunction=ai,ri.tokensToRegExp=ci;var mi=Object.create(null);function vi(e,t,n){t=t||{};try{var r=mi[e]||(mi[e]=ri.compile(e));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),r(t,{pretty:!0})}catch(e){return""}finally{delete t[0]}}function yi(e,t,n,r){var o="string"==typeof e?{path:e}:e;if(o._normalized)return o;if(o.name){var i=(o=Mo({},e)).params;return i&&"object"==typeof i&&(o.params=Mo({},i)),o}if(!o.path&&o.params&&t){(o=Mo({},o))._normalized=!0;var a=Mo(Mo({},t.params),o.params);if(t.name)o.name=t.name,o.params=a;else if(t.matched.length){var c=t.matched[t.matched.length-1].path;o.path=vi(c,a,t.path)}else 0;return o}var u=function(e){var t="",n="",r=e.indexOf("#");r>=0&&(t=e.slice(r),e=e.slice(0,r));var o=e.indexOf("?");return o>=0&&(n=e.slice(o+1),e=e.slice(0,o)),{path:e,query:n,hash:t}}(o.path||""),s=t&&t.path||"/",f=u.path?ei(u.path,s,n||o.append):s,l=function(e,t,n){void 0===t&&(t={});var r,o=n||Ho;try{r=o(e||"")}catch(e){r={}}for(var i in t)r[i]=t[i];return r}(u.query,o.query,r&&r.options.parseQuery),p=o.hash||u.hash;return p&&"#"!==p.charAt(0)&&(p="#"+p),{_normalized:!0,path:f,query:l,hash:p}}var wi,xi=function(){},Si={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(e){var t=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,c=o.href,u={},s=n.options.linkActiveClass,f=n.options.linkExactActiveClass,l=null==s?"router-link-active":s,p=null==f?"router-link-exact-active":f,d=null==this.activeClass?l:this.activeClass,_=null==this.exactActiveClass?p:this.exactActiveClass,g=a.redirectedFrom?Go(null,yi(a.redirectedFrom),null,n):a;u[_]=Qo(r,g),u[d]=this.exact?u[_]:function(e,t){return 0===e.path.replace(qo,"/").indexOf(t.path.replace(qo,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var n in t)if(!(n in e))return!1;return!0}(e.query,t.query)}(r,g);var b=function(e){Ei(e)&&(t.replace?n.replace(i,xi):n.push(i,xi))},h={click:Ei};Array.isArray(this.event)?this.event.forEach((function(e){h[e]=b})):h[this.event]=b;var m={class:u},v=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:c,route:a,navigate:b,isActive:u[d],isExactActive:u[_]});if(v){if(1===v.length)return v[0];if(v.length>1||!v.length)return 0===v.length?e():e("span",{},v)}if("a"===this.tag)m.on=h,m.attrs={href:c};else{var y=function e(t){var n;if(t)for(var r=0;r<t.length;r++){if("a"===(n=t[r]).tag)return n;if(n.children&&(n=e(n.children)))return n}}(this.$slots.default);if(y){y.isStatic=!1;var w=y.data=Mo({},y.data);for(var x in w.on=w.on||{},w.on){var S=w.on[x];x in h&&(w.on[x]=Array.isArray(S)?S:[S])}for(var E in h)E in w.on?w.on[E].push(h[E]):w.on[E]=b;(y.data.attrs=Mo({},y.data.attrs)).href=c}else m.on=h}return e(this.tag,m,this.$slots.default)}};function Ei(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||e.defaultPrevented||void 0!==e.button&&0!==e.button)){if(e.currentTarget&&e.currentTarget.getAttribute){var t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}var Ai="undefined"!=typeof window;function Oi(e,t,n,r){var o=t||[],i=n||Object.create(null),a=r||Object.create(null);e.forEach((function(e){!function e(t,n,r,o,i,a){var c=o.path,u=o.name;0;var s=o.pathToRegexpOptions||{},f=function(e,t,n){n||(e=e.replace(/\/$/,""));if("/"===e[0])return e;if(null==t)return e;return ti(t.path+"/"+e)}(c,i,s.strict);"boolean"==typeof o.caseSensitive&&(s.sensitive=o.caseSensitive);var l={path:f,regex:ki(f,s),components:o.components||{default:o.component},instances:{},name:u,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?ti(a+"/"+o.path):void 0;e(t,n,r,o,l,i)}));n[l.path]||(t.push(l.path),n[l.path]=l);if(void 0!==o.alias)for(var p=Array.isArray(o.alias)?o.alias:[o.alias],d=0;d<p.length;++d){0;var _={path:p[d],children:o.children};e(t,n,r,_,i,l.path||"/")}u&&(r[u]||(r[u]=l))}(o,i,a,e)}));for(var c=0,u=o.length;c<u;c++)"*"===o[c]&&(o.push(o.splice(c,1)[0]),u--,c--);return{pathList:o,pathMap:i,nameMap:a}}function ki(e,t){return ri(e,[],t)}function Ci(e,t){var n=Oi(e),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(e,n,a){var c=yi(e,n,!1,t),s=c.name;if(s){var f=i[s];if(!f)return u(null,c);var l=f.regex.keys.filter((function(e){return!e.optional})).map((function(e){return e.name}));if("object"!=typeof c.params&&(c.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in c.params)&&l.indexOf(p)>-1&&(c.params[p]=n.params[p]);return c.path=vi(f.path,c.params),u(f,c,a)}if(c.path){c.params={};for(var d=0;d<r.length;d++){var _=r[d],g=o[_];if(Ti(g.regex,c.path,c.params))return u(g,c,a)}}return u(null,c)}function c(e,n){var r=e.redirect,o="function"==typeof r?r(Go(e,n,null,t)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return u(null,n);var c=o,s=c.name,f=c.path,l=n.query,p=n.hash,d=n.params;if(l=c.hasOwnProperty("query")?c.query:l,p=c.hasOwnProperty("hash")?c.hash:p,d=c.hasOwnProperty("params")?c.params:d,s){i[s];return a({_normalized:!0,name:s,query:l,hash:p,params:d},void 0,n)}if(f){var _=function(e,t){return ei(e,t.parent?t.parent.path:"/",!0)}(f,e);return a({_normalized:!0,path:vi(_,d),query:l,hash:p},void 0,n)}return u(null,n)}function u(e,n,r){return e&&e.redirect?c(e,r||n):e&&e.matchAs?function(e,t,n){var r=a({_normalized:!0,path:vi(n,t.params)});if(r){var o=r.matched,i=o[o.length-1];return t.params=r.params,u(i,t)}return u(null,t)}(0,n,e.matchAs):Go(e,n,r,t)}return{match:a,addRoutes:function(e){Oi(e,r,o,i)}}}function Ti(e,t,n){var r=t.match(e);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=e.keys[o-1],c="string"==typeof r[o]?decodeURIComponent(r[o]):r[o];a&&(n[a.name||"pathMatch"]=c)}return!0}var Pi=Ai&&window.performance&&window.performance.now?window.performance:Date;function $i(){return Pi.now().toFixed(3)}var ji=$i();function Li(){return ji}function Ii(e){return ji=e}var Ri=Object.create(null);function Mi(){var e=window.location.protocol+"//"+window.location.host,t=window.location.href.replace(e,""),n=Mo({},window.history.state);n.key=Li(),window.history.replaceState(n,"",t),window.addEventListener("popstate",(function(e){Bi(),e.state&&e.state.key&&Ii(e.state.key)}))}function Di(e,t,n,r){if(e.app){var o=e.options.scrollBehavior;o&&e.app.$nextTick((function(){var i=function(){var e=Li();if(e)return Ri[e]}(),a=o.call(e,t,n,r?i:null);a&&("function"==typeof a.then?a.then((function(e){Vi(e,i)})).catch((function(e){0})):Vi(a,i))}))}}function Bi(){var e=Li();e&&(Ri[e]={x:window.pageXOffset,y:window.pageYOffset})}function Ni(e){return Ui(e.x)||Ui(e.y)}function Fi(e){return{x:Ui(e.x)?e.x:window.pageXOffset,y:Ui(e.y)?e.y:window.pageYOffset}}function Ui(e){return"number"==typeof e}var Wi=/^#\d/;function Vi(e,t){var n,r="object"==typeof e;if(r&&"string"==typeof e.selector){var o=Wi.test(e.selector)?document.getElementById(e.selector.slice(1)):document.querySelector(e.selector);if(o){var i=e.offset&&"object"==typeof e.offset?e.offset:{};t=function(e,t){var n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{x:r.left-n.left-t.x,y:r.top-n.top-t.y}}(o,i={x:Ui((n=i).x)?n.x:0,y:Ui(n.y)?n.y:0})}else Ni(e)&&(t=Fi(e))}else r&&Ni(e)&&(t=Fi(e));t&&window.scrollTo(t.x,t.y)}var Hi,zi=Ai&&((-1===(Hi=window.navigator.userAgent).indexOf("Android 2.")&&-1===Hi.indexOf("Android 4.0")||-1===Hi.indexOf("Mobile Safari")||-1!==Hi.indexOf("Chrome")||-1!==Hi.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history);function qi(e,t){Bi();var n=window.history;try{if(t){var r=Mo({},n.state);r.key=Li(),n.replaceState(r,"",e)}else n.pushState({key:Ii($i())},"",e)}catch(n){window.location[t?"replace":"assign"](e)}}function Gi(e){qi(e,!0)}function Ki(e,t,n){var r=function(o){o>=e.length?n():e[o]?t(e[o],(function(){r(o+1)})):r(o+1)};r(0)}function Zi(e){return function(t,n,r){var o=!1,i=0,a=null;Xi(e,(function(e,t,n,c){if("function"==typeof e&&void 0===e.cid){o=!0,i++;var u,s=Ji((function(t){var o;((o=t).__esModule||Qi&&"Module"===o[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:wi.extend(t),n.components[c]=t,--i<=0&&r()})),f=Ji((function(e){var t="Failed to resolve async component "+c+": "+e;a||(a=Io(e)?e:new Error(t),r(a))}));try{u=e(s,f)}catch(e){f(e)}if(u)if("function"==typeof u.then)u.then(s,f);else{var l=u.component;l&&"function"==typeof l.then&&l.then(s,f)}}})),o||r()}}function Xi(e,t){return Yi(e.map((function(e){return Object.keys(e.components).map((function(n){return t(e.components[n],e.instances[n],e,n)}))})))}function Yi(e){return Array.prototype.concat.apply([],e)}var Qi="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Ji(e){var t=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!t)return t=!0,e.apply(this,n)}}var ea=function(e){function t(t){e.call(this),this.name=this._name="NavigationDuplicated",this.message='Navigating to current location ("'+t.fullPath+'") is not allowed',Object.defineProperty(this,"stack",{value:(new e).stack,writable:!0,configurable:!0})}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t}(Error);ea._name="NavigationDuplicated";var ta=function(e,t){this.router=e,this.base=function(e){if(!e)if(Ai){var t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else e="/";"/"!==e.charAt(0)&&(e="/"+e);return e.replace(/\/$/,"")}(t),this.current=Zo,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function na(e,t,n,r){var o=Xi(e,(function(e,r,o,i){var a=function(e,t){"function"!=typeof e&&(e=wi.extend(e));return e.options[t]}(e,t);if(a)return Array.isArray(a)?a.map((function(e){return n(e,r,o,i)})):n(a,r,o,i)}));return Yi(r?o.reverse():o)}function ra(e,t){if(t)return function(){return e.apply(t,arguments)}}ta.prototype.listen=function(e){this.cb=e},ta.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},ta.prototype.onError=function(e){this.errorCbs.push(e)},ta.prototype.transitionTo=function(e,t,n){var r=this,o=this.router.match(e,this.current);this.confirmTransition(o,(function(){r.updateRoute(o),t&&t(o),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(e){e(o)})))}),(function(e){n&&n(e),e&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(t){t(e)})))}))},ta.prototype.confirmTransition=function(e,t,n){var r=this,o=this.current,i=function(e){!Ro(ea,e)&&Io(e)&&(r.errorCbs.length?r.errorCbs.forEach((function(t){t(e)})):console.error(e)),n&&n(e)};if(Qo(e,o)&&e.matched.length===o.matched.length)return this.ensureURL(),i(new ea(e));var a=function(e,t){var n,r=Math.max(e.length,t.length);for(n=0;n<r&&e[n]===t[n];n++);return{updated:t.slice(0,n),activated:t.slice(n),deactivated:e.slice(n)}}(this.current.matched,e.matched),c=a.updated,u=a.deactivated,s=a.activated,f=[].concat(function(e){return na(e,"beforeRouteLeave",ra,!0)}(u),this.router.beforeHooks,function(e){return na(e,"beforeRouteUpdate",ra)}(c),s.map((function(e){return e.beforeEnter})),Zi(s));this.pending=e;var l=function(t,n){if(r.pending!==e)return i();try{t(e,o,(function(e){!1===e||Io(e)?(r.ensureURL(!0),i(e)):"string"==typeof e||"object"==typeof e&&("string"==typeof e.path||"string"==typeof e.name)?(i(),"object"==typeof e&&e.replace?r.replace(e):r.push(e)):n(e)}))}catch(e){i(e)}};Ki(f,l,(function(){var n=[];Ki(function(e,t,n){return na(e,"beforeRouteEnter",(function(e,r,o,i){return function(e,t,n,r,o){return function(i,a,c){return e(i,a,(function(e){"function"==typeof e&&r.push((function(){!function e(t,n,r,o){n[r]&&!n[r]._isBeingDestroyed?t(n[r]):o()&&setTimeout((function(){e(t,n,r,o)}),16)}(e,t.instances,n,o)})),c(e)}))}}(e,o,i,t,n)}))}(s,n,(function(){return r.current===e})).concat(r.router.resolveHooks),l,(function(){if(r.pending!==e)return i();r.pending=null,t(e),r.router.app&&r.router.app.$nextTick((function(){n.forEach((function(e){e()}))}))}))}))},ta.prototype.updateRoute=function(e){var t=this.current;this.current=e,this.cb&&this.cb(e),this.router.afterHooks.forEach((function(n){n&&n(e,t)}))};var oa=function(e){function t(t,n){var r=this;e.call(this,t,n);var o=t.options.scrollBehavior,i=zi&&o;i&&Mi();var a=ia(this.base);window.addEventListener("popstate",(function(e){var n=r.current,o=ia(r.base);r.current===Zo&&o===a||r.transitionTo(o,(function(e){i&&Di(t,e,n,!0)}))}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){qi(ti(r.base+e.fullPath)),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){Gi(ti(r.base+e.fullPath)),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.ensureURL=function(e){if(ia(this.base)!==this.current.fullPath){var t=ti(this.base+this.current.fullPath);e?qi(t):Gi(t)}},t.prototype.getCurrentLocation=function(){return ia(this.base)},t}(ta);function ia(e){var t=decodeURI(window.location.pathname);return e&&0===t.indexOf(e)&&(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var aa=function(e){function t(t,n,r){e.call(this,t,n),r&&function(e){var t=ia(e);if(!/^\/#/.test(t))return window.location.replace(ti(e+"/#"+t)),!0}(this.base)||ca()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this,t=this.router.options.scrollBehavior,n=zi&&t;n&&Mi(),window.addEventListener(zi?"popstate":"hashchange",(function(){var t=e.current;ca()&&e.transitionTo(ua(),(function(r){n&&Di(e.router,r,t,!0),zi||la(r.fullPath)}))}))},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){fa(e.fullPath),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){la(e.fullPath),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;ua()!==t&&(e?fa(t):la(t))},t.prototype.getCurrentLocation=function(){return ua()},t}(ta);function ca(){var e=ua();return"/"===e.charAt(0)||(la("/"+e),!1)}function ua(){var e=window.location.href,t=e.indexOf("#");if(t<0)return"";var n=(e=e.slice(t+1)).indexOf("?");if(n<0){var r=e.indexOf("#");e=r>-1?decodeURI(e.slice(0,r))+e.slice(r):decodeURI(e)}else e=decodeURI(e.slice(0,n))+e.slice(n);return e}function sa(e){var t=window.location.href,n=t.indexOf("#");return(n>=0?t.slice(0,n):t)+"#"+e}function fa(e){zi?qi(sa(e)):window.location.hash=e}function la(e){zi?Gi(sa(e)):window.location.replace(sa(e))}var pa=function(e){function t(t,n){e.call(this,t,n),this.stack=[],this.index=-1}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.push=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index+1).concat(e),r.index++,t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index).concat(e),t&&t(e)}),n)},t.prototype.go=function(e){var t=this,n=this.index+e;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){t.index=n,t.updateRoute(r)}),(function(e){Ro(ea,e)&&(t.index=n)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(ta),da=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ci(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!zi&&!1!==e.fallback,this.fallback&&(t="hash"),Ai||(t="abstract"),this.mode=t,t){case"history":this.history=new oa(this,e.base);break;case"hash":this.history=new aa(this,e.base,this.fallback);break;case"abstract":this.history=new pa(this,e.base);break;default:0}},_a={currentRoute:{configurable:!0}};function ga(e,t){return e.push(t),function(){var n=e.indexOf(t);n>-1&&e.splice(n,1)}}da.prototype.match=function(e,t,n){return this.matcher.match(e,t,n)},_a.currentRoute.get=function(){return this.history&&this.history.current},da.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var n=t.apps.indexOf(e);n>-1&&t.apps.splice(n,1),t.app===e&&(t.app=t.apps[0]||null)})),!this.app){this.app=e;var n=this.history;if(n instanceof oa)n.transitionTo(n.getCurrentLocation());else if(n instanceof aa){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},da.prototype.beforeEach=function(e){return ga(this.beforeHooks,e)},da.prototype.beforeResolve=function(e){return ga(this.resolveHooks,e)},da.prototype.afterEach=function(e){return ga(this.afterHooks,e)},da.prototype.onReady=function(e,t){this.history.onReady(e,t)},da.prototype.onError=function(e){this.history.onError(e)},da.prototype.push=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.push(e,t,n)}));this.history.push(e,t,n)},da.prototype.replace=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.replace(e,t,n)}));this.history.replace(e,t,n)},da.prototype.go=function(e){this.history.go(e)},da.prototype.back=function(){this.go(-1)},da.prototype.forward=function(){this.go(1)},da.prototype.getMatchedComponents=function(e){var t=e?e.matched?e:this.resolve(e).route:this.currentRoute;return t?[].concat.apply([],t.matched.map((function(e){return Object.keys(e.components).map((function(t){return e.components[t]}))}))):[]},da.prototype.resolve=function(e,t,n){var r=yi(e,t=t||this.history.current,n,this),o=this.match(r,t),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(e,t,n){var r="hash"===n?"#"+t:t;return e?ti(e+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},da.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==Zo&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(da.prototype,_a),da.install=function e(t){if(!e.installed||wi!==t){e.installed=!0,wi=t;var n=function(e){return void 0!==e},r=function(e,t){var r=e.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(e,t)};t.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),t.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(t.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(t.prototype,"$route",{get:function(){return this._routerRoot._route}}),t.component("RouterView",Do),t.component("RouterLink",Si);var o=t.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},da.version="3.1.6",Ai&&window.Vue&&window.Vue.use(da);var ba=da;n(56),n(134),n(135),n(136),n(137),n(74),n(138),n(57);function ha(e){e.locales&&Object.keys(e.locales).forEach((function(t){e.locales[t].path=t})),Object.freeze(e)}n(112),n(139),n(23),n(114),n(49);var ma=n(41),va=n(45),ya={NotFound:function(){return n.e(26).then(n.bind(null,310))},Layout:function(){return Promise.all([n.e(0),n.e(4)]).then(n.bind(null,309))}},wa={"v-07f576f6":function(){return n.e(27).then(n.bind(null,314))},"v-55ea2f06":function(){return n.e(28).then(n.bind(null,315))},"v-71235e06":function(){return n.e(14).then(n.bind(null,316))},"v-7458dcb4":function(){return n.e(15).then(n.bind(null,317))},"v-9a956228":function(){return n.e(8).then(n.bind(null,318))},"v-935ace04":function(){return n.e(7).then(n.bind(null,319))},"v-c7f0409c":function(){return n.e(18).then(n.bind(null,320))},"v-3d85f24e":function(){return n.e(19).then(n.bind(null,321))},"v-c24b02f4":function(){return n.e(16).then(n.bind(null,322))},"v-13b45cbc":function(){return n.e(11).then(n.bind(null,323))},"v-085c52d5":function(){return n.e(29).then(n.bind(null,324))},"v-77b18c66":function(){return n.e(5).then(n.bind(null,325))},"v-77ecefa4":function(){return n.e(6).then(n.bind(null,326))},"v-5dc20574":function(){return n.e(17).then(n.bind(null,327))},"v-ff18da5c":function(){return n.e(30).then(n.bind(null,328))},"v-0578da5e":function(){return n.e(31).then(n.bind(null,329))},"v-5959fdec":function(){return n.e(20).then(n.bind(null,330))},"v-548430c6":function(){return n.e(32).then(n.bind(null,331))},"v-73b54474":function(){return n.e(33).then(n.bind(null,332))},"v-41e63074":function(){return n.e(9).then(n.bind(null,333))},"v-0d6f29f2":function(){return n.e(21).then(n.bind(null,334))},"v-87b76dc4":function(){return n.e(22).then(n.bind(null,335))},"v-4a02acc0":function(){return n.e(23).then(n.bind(null,336))},"v-a9b07284":function(){return n.e(24).then(n.bind(null,337))},"v-5f93f1f6":function(){return n.e(34).then(n.bind(null,338))}};function xa(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var Sa=/-(\w)/g,Ea=xa((function(e){return e.replace(Sa,(function(e,t){return t?t.toUpperCase():""}))})),Aa=/\B([A-Z])/g,Oa=xa((function(e){return e.replace(Aa,"-$1").toLowerCase()})),ka=xa((function(e){return e.charAt(0).toUpperCase()+e.slice(1)}));function Ca(e,t){if(t)return e(t)?e(t):t.includes("-")?e(ka(Ea(t))):e(ka(t))||e(Oa(t))}var Ta=Object.assign({},ya,wa),Pa=function(e){return Ta[e]},$a=function(e){return wa[e]},ja=function(e){return ya[e]},La=function(e){return Lo.component(e)};function Ia(e){return Ca($a,e)}function Ra(e){return Ca(ja,e)}function Ma(e){return Ca(Pa,e)}function Da(e){return Ca(La,e)}function Ba(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return Promise.all(t.filter((function(e){return e})).map(function(){var e=Object(r.a)(regeneratorRuntime.mark((function e(t){var n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(Da(t)||!Ma(t)){e.next=5;break}return e.next=3,Ma(t)();case 3:n=e.sent,Lo.component(t,n.default);case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()))}function Na(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}n(79),n(80),n(59),n(142);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 e=this;document.title=this.$title,document.documentElement.lang=this.$lang;var t=this.$page.frontmatter.meta||[],n=t.slice(0);0===t.filter((function(e){return"description"===e.name})).length&&n.push({name:"description",content:this.$description});var r=document.querySelectorAll('meta[name="description"]');r.length&&r.forEach((function(t){return e.currentMetaTags.add(t)})),this.currentMetaTags=new Set(Ua(n,this.currentMetaTags))}},watch:{$page:function(){this.updateMeta()}},beforeDestroy:function(){Ua(null,this.currentMetaTags)}};function Ua(e,t){if(t&&Object(va.a)(t).forEach((function(e){document.head.removeChild(e)})),e)return e.map((function(e){var t=document.createElement("meta");return Object.keys(e).forEach((function(n){t.setAttribute(n,e[n])})),document.head.appendChild(t),t}))}n(108);var Wa=n(46),Va=n.n(Wa),Ha={mounted:function(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Va()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var e=this,t=[].slice.call(document.querySelectorAll(".sidebar-link")),n=[].slice.call(document.querySelectorAll(".header-anchor")).filter((function(e){return t.some((function(t){return t.hash===e.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 c=n[a],u=n[a+1],s=0===a&&0===r||r>=c.parentElement.offsetTop+10&&(!u||r<u.parentElement.offsetTop-10),f=decodeURIComponent(this.$route.hash);if(s&&f!==decodeURIComponent(c.hash)){var l=c;if(i===o)for(var p=a+1;p<n.length;p++)if(f===decodeURIComponent(n[p].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(l.hash),(function(){e.$nextTick((function(){e.$vuepress.$set("disableScrollBehavior",!1)}))}))}}}},beforeDestroy:function(){window.removeEventListener("scroll",this.onScroll)}},za=n(47),qa=n.n(za),Ga={mounted:function(){var e=this;qa.a.configure({showSpinner:!1}),this.$router.beforeEach((function(e,t,n){e.path===t.path||Lo.component(e.name)||qa.a.start(),n()})),this.$router.afterEach((function(){qa.a.done(),e.isSidebarOpen=!1}))}};n(107);function Ka(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Za(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}n(109),n(126);var Xa={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 e={};return e[this.options.align]="7.5px",e},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(e){var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},copyToClipboard:function(e){var t=this;if(navigator.clipboard)navigator.clipboard.writeText(this.code).then((function(){t.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 e=this;if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";var t=this.hexToRgb(this.options.backgroundColor);this.parent.style.background="rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", 0.1)")}this.success=!0,this.successTimeout=setTimeout((function(){e.options.backgroundTransition&&(e.parent.style.background=e.originalBackground,e.parent.style.transition=e.originalTransition),e.success=!1}),500)}}},Ya=(n(147),n(10)),Qa=Object(Ya.a)(Xa,(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"code-copy"},[n("svg",{class:e.iconClass,style:e.alignStyle,attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},on:{click:e.copyToClipboard}},[n("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),e._v(" "),n("path",{attrs:{fill:e.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"}})]),e._v(" "),n("span",{class:e.success?"success":"",style:e.alignStyle},[e._v("\n        "+e._s(e.options.successText)+"\n    ")])])}),[],!1,null,"49140617",null).exports,Ja=(n(148),[Fa,Ha,Ga,{updated:function(){this.update()},methods:{update:function(){setTimeout((function(){document.querySelectorAll('div[class*="language-"] pre').forEach((function(e){if(!e.classList.contains("code-copy-added")){var t=new(Lo.extend(Qa));t.options=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Za(Object(n),!0).forEach((function(t){Ka(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Za(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},{align:"bottom",color:"#27b1ff",backgroundTransition:!0,backgroundColor:"#0075b8",successText:"Copied!",staticIcon:!1}),t.code=e.innerText,t.parent=e,t.$mount(),e.classList.add("code-copy-added"),e.appendChild(t.$el)}}))}),100)}}}]),ec={name:"GlobalLayout",computed:{layout:function(){var e=this.getLayout();return Na("layout",e),Lo.component(e)}},methods:{getLayout:function(){if(this.$page.path){var e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},tc=Object(Ya.a)(ec,(function(){var e=this.$createElement;return(this._self._c||e)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(e,t,n){var r;switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],n);break;case"mixins":e[t]||(e[t]=[]),(r=e[t]).push.apply(r,Object(va.a)(n));break;default:throw new Error("Unknown option name.")}}(tc,"mixins",Ja);var nc=[{name:"v-07f576f6",path:"/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-07f576f6").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-55ea2f06",path:"/beginner/tutorial1-window/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-55ea2f06").then(n)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-71235e06",path:"/beginner/tutorial2-surface/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-71235e06").then(n)}},{path:"/beginner/tutorial2-surface/index.html",redirect:"/beginner/tutorial2-surface/"},{name:"v-7458dcb4",path:"/beginner/tutorial3-pipeline/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-7458dcb4").then(n)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-9a956228",path:"/beginner/tutorial4-buffer/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-9a956228").then(n)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-935ace04",path:"/beginner/tutorial5-textures/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-935ace04").then(n)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-c7f0409c",path:"/beginner/tutorial6-uniforms/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-c7f0409c").then(n)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-3d85f24e",path:"/beginner/tutorial7-instancing/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-3d85f24e").then(n)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-c24b02f4",path:"/beginner/tutorial8-depth/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-c24b02f4").then(n)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-13b45cbc",path:"/beginner/tutorial9-models/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-13b45cbc").then(n)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-085c52d5",path:"/intermediate/pbr-notes.html",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-085c52d5").then(n)}},{name:"v-77b18c66",path:"/intermediate/tutorial10-lighting/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-77b18c66").then(n)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-77ecefa4",path:"/intermediate/tutorial11-normals/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-77ecefa4").then(n)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-5dc20574",path:"/intermediate/tutorial12-camera/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-5dc20574").then(n)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-ff18da5c",path:"/intermediate/tutorial13-threading/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-ff18da5c").then(n)}},{path:"/intermediate/tutorial13-threading/index.html",redirect:"/intermediate/tutorial13-threading/"},{name:"v-0578da5e",path:"/news/0.12/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-0578da5e").then(n)}},{path:"/news/0.12/index.html",redirect:"/news/0.12/"},{name:"v-5959fdec",path:"/news/pre-0.12/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-5959fdec").then(n)}},{path:"/news/pre-0.12/index.html",redirect:"/news/pre-0.12/"},{name:"v-548430c6",path:"/showcase/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-548430c6").then(n)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-73b54474",path:"/showcase/alignment/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-73b54474").then(n)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-41e63074",path:"/showcase/compute/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-41e63074").then(n)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-0d6f29f2",path:"/showcase/gifs/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-0d6f29f2").then(n)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-87b76dc4",path:"/showcase/imgui-demo/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-87b76dc4").then(n)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-4a02acc0",path:"/showcase/pong/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-4a02acc0").then(n)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-a9b07284",path:"/showcase/windowless/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-a9b07284").then(n)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-5f93f1f6",path:"/todo.html",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-5f93f1f6").then(n)}},{path:"*",component:tc}],rc={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",pages:[{title:"Introduction",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/",relativePath:"README.md",key:"v-07f576f6",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:"12/29/2021, 6:33:55 PM"},{title:"Dependencies and the window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial1-window/",relativePath:"beginner/tutorial1-window/README.md",key:"v-55ea2f06",path:"/beginner/tutorial1-window/",headers:[{level:2,title:"Boring, I know",slug:"boring-i-know"},{level:2,title:"What crates are we using?",slug:"what-crates-are-we-using"},{level:2,title:"Using Rust's new resolver",slug:"using-rust-s-new-resolver"},{level:2,title:"env_logger",slug:"env-logger"},{level:2,title:"The code",slug:"the-code"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"The Surface",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Surface"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial2-surface/"},{name:"twitter:title",content:"The Surface"},{name:"twitter:url",content:"/beginner/tutorial2-surface/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial2-surface/",relativePath:"beginner/tutorial2-surface/README.md",key:"v-71235e06",path:"/beginner/tutorial2-surface/",headers:[{level:2,title:"First, some housekeeping: State",slug:"first-some-housekeeping-state"},{level:2,title:"State::new()",slug:"state-new"},{level:3,title:"Instance and Adapter",slug:"instance-and-adapter"},{level:3,title:"The Surface",slug:"the-surface-2"},{level:3,title:"Device and Queue",slug:"device-and-queue"},{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:"Validation Errors?",slug:"validation-errors"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"The Pipeline",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial3-pipeline/",relativePath:"beginner/tutorial3-pipeline/README.md",key:"v-7458dcb4",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:"12/29/2021, 6:33:55 PM"},{title:"Buffers and Indices",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial4-buffer/",relativePath:"beginner/tutorial4-buffer/README.md",key:"v-9a956228",path:"/beginner/tutorial4-buffer/",headers:[{level:2,title:"We're finally talking about them!",slug:"we-re-finally-talking-about-them"},{level:2,title:"What is a buffer?",slug:"what-is-a-buffer"},{level:2,title:"The vertex buffer",slug:"the-vertex-buffer"},{level:2,title:"So what do I do with it?",slug:"so-what-do-i-do-with-it"},{level:2,title:"The index buffer",slug:"the-index-buffer"},{level:2,title:"Color Correction",slug:"color-correction"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Textures and bind groups",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial5-textures/",relativePath:"beginner/tutorial5-textures/README.md",key:"v-935ace04",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:"12/29/2021, 6:33:55 PM"},{title:"Uniform buffers and a 3d camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial6-uniforms/",relativePath:"beginner/tutorial6-uniforms/README.md",key:"v-c7f0409c",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 uniform in the vertex shader",slug:"using-the-uniform-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:"12/29/2021, 6:33:55 PM"},{title:"Instancing",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial7-instancing/",relativePath:"beginner/tutorial7-instancing/README.md",key:"v-3d85f24e",path:"/beginner/tutorial7-instancing/",headers:[{level:2,title:"The Instance Buffer",slug:"the-instance-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"The Depth Buffer",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial8-depth/",relativePath:"beginner/tutorial8-depth/README.md",key:"v-c24b02f4",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:"12/29/2021, 6:33:55 PM"},{title:"Model Loading",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial9-models/",relativePath:"beginner/tutorial9-models/README.md",key:"v-13b45cbc",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:"12/29/2021, 6:33:55 PM"},{title:"Sources",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Sources"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/pbr-notes.html"},{name:"twitter:title",content:"Sources"},{name:"twitter:url",content:"/intermediate/pbr-notes.html"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/pbr-notes.html",relativePath:"intermediate/pbr-notes.md",key:"v-085c52d5",path:"/intermediate/pbr-notes.html",lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Working with Lights",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial10-lighting/",relativePath:"intermediate/tutorial10-lighting/README.md",key:"v-77b18c66",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:"12/29/2021, 6:33:55 PM"},{title:"Normal Mapping",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial11-normals/",relativePath:"intermediate/tutorial11-normals/README.md",key:"v-77ecefa4",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:"12/29/2021, 6:33:55 PM"},{title:"A Better Camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial12-camera/",relativePath:"intermediate/tutorial12-camera/README.md",key:"v-5dc20574",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:"12/29/2021, 6:33:55 PM"},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial13-threading/",relativePath:"intermediate/tutorial13-threading/README.md",key:"v-ff18da5c",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:"12/29/2021, 6:33:55 PM"},{title:"Update to 0.12!",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Update to 0.12!"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/0.12/"},{name:"twitter:title",content:"Update to 0.12!"},{name:"twitter:url",content:"/news/0.12/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/0.12/",relativePath:"news/0.12/readme.md",key:"v-0578da5e",path:"/news/0.12/",headers:[{level:2,title:"Multi view added",slug:"multi-view-added"},{level:2,title:"No more block attribute",slug:"no-more-block-attribute"},{level:2,title:"More validation",slug:"more-validation"},{level:2,title:"Misc",slug:"misc"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"News (Pre 0.12)",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"News (Pre 0.12)"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/pre-0.12/"},{name:"twitter:title",content:"News (Pre 0.12)"},{name:"twitter:url",content:"/news/pre-0.12/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/pre-0.12/",relativePath:"news/pre-0.12/readme.md",key:"v-5959fdec",path:"/news/pre-0.12/",headers:[{level:2,title:"Pong working on the web",slug:"pong-working-on-the-web"},{level:2,title:"0.12 further changes to Surface",slug:"_0-12-further-changes-to-surface"},{level:2,title:"Pong is fixed for 0.10",slug:"pong-is-fixed-for-0-10"},{level:2,title:"0.10 SwapChain is dead, long live the Surface!",slug:"_0-10-swapchain-is-dead-long-live-the-surface"},{level:2,title:"Pong and imgui demos are fixed!",slug:"pong-and-imgui-demos-are-fixed"},{level:2,title:"0.8 and WGSL",slug:"_0-8-and-wgsl"},{level:3,title:"The GLSL shaders have been translated to WGSL",slug:"the-glsl-shaders-have-been-translated-to-wgsl"},{level:3,title:"Shaderc has been removed",slug:"shaderc-has-been-removed"},{level:3,title:"Some of the showcase examples are broken",slug:"some-of-the-showcase-examples-are-broken"},{level:3,title:"Various API changes",slug:"various-api-changes"},{level:2,title:"0.7",slug:"_0-7"},{level:2,title:"November 2020 Cleanup, Content Freeze, and Patreon",slug:"november-2020-cleanup-content-freeze-and-patreon"},{level:2,title:"0.6",slug:"_0-6"},{level:2,title:"Added Pong Showcase",slug:"added-pong-showcase"},{level:2,title:"Normal mapping",slug:"normal-mapping"},{level:2,title:"0.5!",slug:"_0-5"},{level:2,title:"Reworked lighting tutorial",slug:"reworked-lighting-tutorial"},{level:2,title:"Added GIF showcase",slug:"added-gif-showcase"},{level:2,title:"Updated texture tutorials",slug:"updated-texture-tutorials"},{level:2,title:"Fixed panics do to not specifying the correct usage",slug:"fixed-panics-do-to-not-specifying-the-correct-usage"},{level:2,title:"Updating Winit from 0.20.0-alpha5 to 0.20",slug:"updating-winit-from-0-20-0-alpha5-to-0-20"},{level:2,title:"Changed tutorial examples to use a src directory",slug:"changed-tutorial-examples-to-use-a-src-directory"},{level:2,title:"Updating to 0.4 from 0.3",slug:"updating-to-0-4-from-0-3"},{level:2,title:"New/Recent Articles",slug:"new-recent-articles"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Foreward",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-548430c6",path:"/showcase/",lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Memory Layout in WGSL",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Memory Layout in WGSL"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/alignment/"},{name:"twitter:title",content:"Memory Layout in WGSL"},{name:"twitter:url",content:"/showcase/alignment/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/alignment/",relativePath:"showcase/alignment/README.md",key:"v-73b54474",path:"/showcase/alignment/",headers:[{level:2,title:"Alignment of vertex and index buffers",slug:"alignment-of-vertex-and-index-buffers"},{level:2,title:"Alignment of Uniform and Storage buffers",slug:"alignment-of-uniform-and-storage-buffers"},{level:2,title:"How to deal with alignment issues",slug:"how-to-deal-with-alignment-issues"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Compute Example: Tangents and Bitangents",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/compute/",relativePath:"showcase/compute/README.md",key:"v-41e63074",path:"/showcase/compute/",headers:[{level:2,title:"Possible Improvements",slug:"possible-improvements"},{level:2,title:"Results",slug:"results"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Creating gifs",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/gifs/",relativePath:"showcase/gifs/README.md",key:"v-0d6f29f2",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:"12/29/2021, 6:33:55 PM"},{title:"Basic Imgui Demo",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-87b76dc4",path:"/showcase/imgui-demo/",lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Pong",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/pong/",relativePath:"showcase/pong/README.md",key:"v-4a02acc0",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:"WASM Support",slug:"wasm-support"},{level:2,title:"Summary",slug:"summary"}],lastUpdated:"12/29/2021, 6:33:55 PM"},{title:"Wgpu without a window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/windowless/",relativePath:"showcase/windowless/README.md",key:"v-a9b07284",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:"12/29/2021, 6:33:55 PM"},{title:"Coming Soon!",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:33:55.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/todo.html",relativePath:"todo.md",key:"v-5f93f1f6",path:"/todo.html",lastUpdated:"12/29/2021, 6:33:55 PM"}],themeConfig:{author:{name:"Benjamin Hansen",twitter:"https://twitter.com/sotrh760"},displayAllHeaders:!1,lastUpdated:"Last Updated",sidebar:["/",{title:"Beginner",collapsable:!1,children:["/beginner/tutorial1-window/","/beginner/tutorial2-surface/","/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/"]},{title:"News",collapsable:!0,children:["/news/0.12/","/news/pre-0.12/"]}]}};n(149);Lo.component("AutoGithubLink",(function(){return n.e(25).then(n.bind(null,311))})),Lo.component("RecentArticles",(function(){return n.e(12).then(n.bind(null,312))})),Lo.component("WasmExample",(function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,313))})),Lo.component("Badge",(function(){return Promise.all([n.e(0),n.e(13)]).then(n.bind(null,339))}));n(150),n(151);var oc={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:function(){return{scrollTop:null}},computed:{show:function(){return this.scrollTop>this.threshold}},mounted:function(){var e=this;this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Va()((function(){e.scrollTop=e.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}}},ic=(n(152),Object(Ya.a)(oc,(function(){var e=this.$createElement,t=this._self._c||e;return t("transition",{attrs:{name:"fade"}},[this.show?t("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[t("g",{attrs:{transform:"translate(-229 -126.358)"}},[t("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),t("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),ac=[{},function(e){e.Vue.mixin({computed:{$dataBlock:function(){return this.$options.__data__block__}}})},{},{},function(e){e.Vue.component("CodeCopy",Qa)},function(e){e.Vue.component("BackToTop",ic)}],cc=["BackToTop"];n(119);function uc(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function sc(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function fc(e,t,n){return t&&sc(e.prototype,t),n&&sc(e,n),e}function lc(e,t){return(lc=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function pc(e){return(pc=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function dc(){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(e){return!1}}function _c(e,t){return!t||"object"!==Object(ma.a)(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}var gc=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&lc(e,t)}(r,e);var t,n=(t=r,function(){var e,n=pc(t);if(dc()){var r=pc(this).constructor;e=Reflect.construct(n,arguments,r)}else e=n.apply(this,arguments);return _c(this,e)});function r(){return uc(this,r),n.apply(this,arguments)}return r}(function(){function e(){uc(this,e),this.store=new Lo({data:{state:{}}})}return fc(e,[{key:"$get",value:function(e){return this.store.state[e]}},{key:"$set",value:function(e,t){Lo.set(this.store.state,e,t)}},{key:"$emit",value:function(){var e;(e=this.store).$emit.apply(e,arguments)}},{key:"$on",value:function(){var e;(e=this.store).$on.apply(e,arguments)}}]),e}());Object.assign(gc.prototype,{getPageAsyncComponent:Ia,getLayoutAsyncComponent:Ra,getAsyncComponent:Ma,getVueComponent:Da});var bc={install:function(e){var t=new gc;e.$vuepress=t,e.prototype.$vuepress=t}};function hc(e){e.beforeEach((function(t,n,r){if(mc(e,t.path))r();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){var o=t.path.replace(/\/$/,"")+".html";mc(e,o)?r(o):r()}else r();else{var i=t.path+"/",a=t.path+".html";mc(e,a)?r(a):mc(e,i)?r(i):r()}}))}function mc(e,t){return e.options.routes.filter((function(e){return e.path.toLowerCase()===t.toLowerCase()})).length>0}var vc={props:{pageKey:String,slotKey:{type:String,default:"default"}},render:function(e){var t=this.pageKey||this.$parent.$page.key;return Na("pageKey",t),Lo.component(t)||Lo.component(t,Ia(t)),Lo.component(t)?e(t):e("")}},yc={functional:!0,props:{slotKey:String,required:!0},render:function(e,t){var n=t.props,r=t.slots;return e("div",{class:["content__".concat(n.slotKey)]},r()[n.slotKey])}},wc=(n(153),Object(Ya.a)({},(function(e,t){var n=t._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"}}),t._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 xc(){return(xc=Object(r.a)(regeneratorRuntime.mark((function e(t){var n,r,o,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:rc.routerBase||rc.base,hc(r=new ba({base:n,mode:"history",fallback:!1,routes:nc,scrollBehavior:function(e,t,n){return n||(e.hash?!Lo.$vuepress.$get("disableScrollBehavior")&&{selector:e.hash}:{x:0,y:0})}})),o={},e.prev=4,e.next=7,Promise.all(ac.filter((function(e){return"function"==typeof e})).map((function(e){return e({Vue:Lo,options:o,router:r,siteData:rc,isServer:t})})));case 7:e.next=12;break;case 9:e.prev=9,e.t0=e.catch(4),console.error(e.t0);case 12:return i=new Lo(Object.assign(o,{router:r,render:function(e){return e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},cc.map((function(t){return e(t)})))])}})),e.abrupt("return",{app:i,router:r});case 14:case"end":return e.stop()}}),e,null,[[4,9]])})))).apply(this,arguments)}Lo.config.productionTip=!1,Lo.use(ba),Lo.use(bc),Lo.mixin(function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Lo;ha(t),n.$vuepress.$set("siteData",t);var r=e(n.$vuepress.$get("siteData")),o=new r,i=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(i).reduce((function(e,t){return t.startsWith("$")&&(e[t]=i[t].get),e}),a),{computed:a}}((function(e){return function(){function t(){uc(this,t)}return fc(t,[{key:"setPage",value:function(e){this.__page=e}},{key:"$site",get:function(){return e}},{key:"$themeConfig",get:function(){return this.$site.themeConfig}},{key:"$frontmatter",get:function(){return this.$page.frontmatter}},{key:"$localeConfig",get:function(){var e,t,n=this.$site.locales,r=void 0===n?{}:n;for(var o in r)"/"===o?t=r[o]:0===this.$page.path.indexOf(o)&&(e=r[o]);return e||t||{}}},{key:"$siteTitle",get:function(){return this.$localeConfig.title||this.$site.title||""}},{key:"$title",get:function(){var e=this.$page,t=this.$page.frontmatter.metaTitle;if("string"==typeof t)return t;var n=this.$siteTitle,r=e.frontmatter.home?null:e.frontmatter.title||e.title;return n?r?r+" | "+n:n:r||"VuePress"}},{key:"$description",get:function(){var e=function(e){if(e){var t=e.filter((function(e){return"description"===e.name}))[0];if(t)return t.content}}(this.$page.frontmatter.meta);return e||(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(e,t){for(var n=0;n<e.length;n++){var r=e[n];if(r.path.toLowerCase()===t.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}}]),t}()}),rc)),Lo.component("Content",vc),Lo.component("ContentSlotsDistributor",yc),Lo.component("OutboundLink",wc),Lo.component("ClientOnly",{functional:!0,render:function(e,t){var n=t.parent,r=t.children;if(n._isMounted)return r;n.$once("hook:mounted",(function(){n.$forceUpdate()}))}}),Lo.component("Layout",Ra("Layout")),Lo.component("NotFound",Ra("NotFound")),Lo.prototype.$withBase=function(e){var t=this.$site.base;return"/"===e.charAt(0)?t+e.slice(1):e},window.__VUEPRESS__={version:"1.4.0",hash:"611b299"},function(e){return xc.apply(this,arguments)}(!1).then((function(e){var t=e.app;e.router.onReady((function(){t.$mount("#app")}))}))}]);
\ No newline at end of file
+  */function Io(e){return Object.prototype.toString.call(e).indexOf("Error")>-1}function Ro(e,t){return t instanceof e||t&&(t.name===e.name||t._name===e._name)}function Mo(e,t){for(var n in t)e[n]=t[n];return e}var Do={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(e,t){var n=t.props,r=t.children,o=t.parent,i=t.data;i.routerView=!0;for(var a=o.$createElement,c=n.name,u=o.$route,s=o._routerViewCache||(o._routerViewCache={}),f=0,l=!1;o&&o._routerRoot!==o;){var p=o.$vnode?o.$vnode.data:{};p.routerView&&f++,p.keepAlive&&o._directInactive&&o._inactive&&(l=!0),o=o.$parent}if(i.routerViewDepth=f,l){var d=s[c],_=d&&d.component;return _?(d.configProps&&Bo(_,i,d.route,d.configProps),a(_,i,r)):a()}var g=u.matched[f],b=g&&g.components[c];if(!g||!b)return s[c]=null,a();s[c]={component:b},i.registerRouteInstance=function(e,t){var n=g.instances[c];(t&&n!==e||!t&&n===e)&&(g.instances[c]=t)},(i.hook||(i.hook={})).prepatch=function(e,t){g.instances[c]=t.componentInstance},i.hook.init=function(e){e.data.keepAlive&&e.componentInstance&&e.componentInstance!==g.instances[c]&&(g.instances[c]=e.componentInstance)};var h=g.props&&g.props[c];return h&&(Mo(s[c],{route:u,configProps:h}),Bo(b,i,u,h)),a(b,i,r)}};function Bo(e,t,n,r){var o=t.props=function(e,t){switch(typeof t){case"undefined":return;case"object":return t;case"function":return t(e);case"boolean":return t?e.params:void 0;default:0}}(n,r);if(o){o=t.props=Mo({},o);var i=t.attrs=t.attrs||{};for(var a in o)e.props&&a in e.props||(i[a]=o[a],delete o[a])}}var No=/[!'()*]/g,Fo=function(e){return"%"+e.charCodeAt(0).toString(16)},Uo=/%2C/g,Wo=function(e){return encodeURIComponent(e).replace(No,Fo).replace(Uo,",")},Vo=decodeURIComponent;function Ho(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var n=e.replace(/\+/g," ").split("="),r=Vo(n.shift()),o=n.length>0?Vo(n.join("=")):null;void 0===t[r]?t[r]=o:Array.isArray(t[r])?t[r].push(o):t[r]=[t[r],o]})),t):t}function zo(e){var t=e?Object.keys(e).map((function(t){var n=e[t];if(void 0===n)return"";if(null===n)return Wo(t);if(Array.isArray(n)){var r=[];return n.forEach((function(e){void 0!==e&&(null===e?r.push(Wo(t)):r.push(Wo(t)+"="+Wo(e)))})),r.join("&")}return Wo(t)+"="+Wo(n)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var qo=/\/?$/;function Go(e,t,n,r){var o=r&&r.options.stringifyQuery,i=t.query||{};try{i=Ko(i)}catch(e){}var a={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:i,params:t.params||{},fullPath:Yo(t,o),matched:e?Xo(e):[]};return n&&(a.redirectedFrom=Yo(n,o)),Object.freeze(a)}function Ko(e){if(Array.isArray(e))return e.map(Ko);if(e&&"object"==typeof e){var t={};for(var n in e)t[n]=Ko(e[n]);return t}return e}var Zo=Go(null,{path:"/"});function Xo(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function Yo(e,t){var n=e.path,r=e.query;void 0===r&&(r={});var o=e.hash;return void 0===o&&(o=""),(n||"/")+(t||zo)(r)+o}function Qo(e,t){return t===Zo?e===t:!!t&&(e.path&&t.path?e.path.replace(qo,"")===t.path.replace(qo,"")&&e.hash===t.hash&&Jo(e.query,t.query):!(!e.name||!t.name)&&(e.name===t.name&&e.hash===t.hash&&Jo(e.query,t.query)&&Jo(e.params,t.params)))}function Jo(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var n=Object.keys(e),r=Object.keys(t);return n.length===r.length&&n.every((function(n){var r=e[n],o=t[n];return"object"==typeof r&&"object"==typeof o?Jo(r,o):String(r)===String(o)}))}function ei(e,t,n){var r=e.charAt(0);if("/"===r)return e;if("?"===r||"#"===r)return t+e;var o=t.split("/");n&&o[o.length-1]||o.pop();for(var i=e.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var c=i[a];".."===c?o.pop():"."!==c&&o.push(c)}return""!==o[0]&&o.unshift(""),o.join("/")}function ti(e){return e.replace(/\/\//g,"/")}var ni=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)},ri=hi,oi=si,ii=function(e,t){return li(si(e,t))},ai=li,ci=bi,ui=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function si(e,t){for(var n,r=[],o=0,i=0,a="",c=t&&t.delimiter||"/";null!=(n=ui.exec(e));){var u=n[0],s=n[1],f=n.index;if(a+=e.slice(i,f),i=f+u.length,s)a+=s[1];else{var l=e[i],p=n[2],d=n[3],_=n[4],g=n[5],b=n[6],h=n[7];a&&(r.push(a),a="");var m=null!=p&&null!=l&&l!==p,v="+"===b||"*"===b,y="?"===b||"*"===b,w=n[2]||c,x=_||g;r.push({name:d||o++,prefix:p||"",delimiter:w,optional:y,repeat:v,partial:m,asterisk:!!h,pattern:x?di(x):h?".*":"[^"+pi(w)+"]+?"})}}return i<e.length&&(a+=e.substr(i)),a&&r.push(a),r}function fi(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function li(e){for(var t=new Array(e.length),n=0;n<e.length;n++)"object"==typeof e[n]&&(t[n]=new RegExp("^(?:"+e[n].pattern+")$"));return function(n,r){for(var o="",i=n||{},a=(r||{}).pretty?fi:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var s,f=i[u.name];if(null==f){if(u.optional){u.partial&&(o+=u.prefix);continue}throw new TypeError('Expected "'+u.name+'" to be defined')}if(ni(f)){if(!u.repeat)throw new TypeError('Expected "'+u.name+'" to not repeat, but received `'+JSON.stringify(f)+"`");if(0===f.length){if(u.optional)continue;throw new TypeError('Expected "'+u.name+'" to not be empty')}for(var l=0;l<f.length;l++){if(s=a(f[l]),!t[c].test(s))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(s)+"`");o+=(0===l?u.prefix:u.delimiter)+s}}else{if(s=u.asterisk?encodeURI(f).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):a(f),!t[c].test(s))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+s+'"');o+=u.prefix+s}}else o+=u}return o}}function pi(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function di(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function _i(e,t){return e.keys=t,e}function gi(e){return e.sensitive?"":"i"}function bi(e,t,n){ni(t)||(n=t||n,t=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<e.length;a++){var c=e[a];if("string"==typeof c)i+=pi(c);else{var u=pi(c.prefix),s="(?:"+c.pattern+")";t.push(c),c.repeat&&(s+="(?:"+u+s+")*"),i+=s=c.optional?c.partial?u+"("+s+")?":"(?:"+u+"("+s+"))?":u+"("+s+")"}}var f=pi(n.delimiter||"/"),l=i.slice(-f.length)===f;return r||(i=(l?i.slice(0,-f.length):i)+"(?:"+f+"(?=$))?"),i+=o?"$":r&&l?"":"(?="+f+"|$)",_i(new RegExp("^"+i,gi(n)),t)}function hi(e,t,n){return ni(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return _i(e,t)}(e,t):ni(e)?function(e,t,n){for(var r=[],o=0;o<e.length;o++)r.push(hi(e[o],t,n).source);return _i(new RegExp("(?:"+r.join("|")+")",gi(n)),t)}(e,t,n):function(e,t,n){return bi(si(e,n),t,n)}(e,t,n)}ri.parse=oi,ri.compile=ii,ri.tokensToFunction=ai,ri.tokensToRegExp=ci;var mi=Object.create(null);function vi(e,t,n){t=t||{};try{var r=mi[e]||(mi[e]=ri.compile(e));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),r(t,{pretty:!0})}catch(e){return""}finally{delete t[0]}}function yi(e,t,n,r){var o="string"==typeof e?{path:e}:e;if(o._normalized)return o;if(o.name){var i=(o=Mo({},e)).params;return i&&"object"==typeof i&&(o.params=Mo({},i)),o}if(!o.path&&o.params&&t){(o=Mo({},o))._normalized=!0;var a=Mo(Mo({},t.params),o.params);if(t.name)o.name=t.name,o.params=a;else if(t.matched.length){var c=t.matched[t.matched.length-1].path;o.path=vi(c,a,t.path)}else 0;return o}var u=function(e){var t="",n="",r=e.indexOf("#");r>=0&&(t=e.slice(r),e=e.slice(0,r));var o=e.indexOf("?");return o>=0&&(n=e.slice(o+1),e=e.slice(0,o)),{path:e,query:n,hash:t}}(o.path||""),s=t&&t.path||"/",f=u.path?ei(u.path,s,n||o.append):s,l=function(e,t,n){void 0===t&&(t={});var r,o=n||Ho;try{r=o(e||"")}catch(e){r={}}for(var i in t)r[i]=t[i];return r}(u.query,o.query,r&&r.options.parseQuery),p=o.hash||u.hash;return p&&"#"!==p.charAt(0)&&(p="#"+p),{_normalized:!0,path:f,query:l,hash:p}}var wi,xi=function(){},Si={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(e){var t=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,c=o.href,u={},s=n.options.linkActiveClass,f=n.options.linkExactActiveClass,l=null==s?"router-link-active":s,p=null==f?"router-link-exact-active":f,d=null==this.activeClass?l:this.activeClass,_=null==this.exactActiveClass?p:this.exactActiveClass,g=a.redirectedFrom?Go(null,yi(a.redirectedFrom),null,n):a;u[_]=Qo(r,g),u[d]=this.exact?u[_]:function(e,t){return 0===e.path.replace(qo,"/").indexOf(t.path.replace(qo,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var n in t)if(!(n in e))return!1;return!0}(e.query,t.query)}(r,g);var b=function(e){Ei(e)&&(t.replace?n.replace(i,xi):n.push(i,xi))},h={click:Ei};Array.isArray(this.event)?this.event.forEach((function(e){h[e]=b})):h[this.event]=b;var m={class:u},v=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:c,route:a,navigate:b,isActive:u[d],isExactActive:u[_]});if(v){if(1===v.length)return v[0];if(v.length>1||!v.length)return 0===v.length?e():e("span",{},v)}if("a"===this.tag)m.on=h,m.attrs={href:c};else{var y=function e(t){var n;if(t)for(var r=0;r<t.length;r++){if("a"===(n=t[r]).tag)return n;if(n.children&&(n=e(n.children)))return n}}(this.$slots.default);if(y){y.isStatic=!1;var w=y.data=Mo({},y.data);for(var x in w.on=w.on||{},w.on){var S=w.on[x];x in h&&(w.on[x]=Array.isArray(S)?S:[S])}for(var E in h)E in w.on?w.on[E].push(h[E]):w.on[E]=b;(y.data.attrs=Mo({},y.data.attrs)).href=c}else m.on=h}return e(this.tag,m,this.$slots.default)}};function Ei(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||e.defaultPrevented||void 0!==e.button&&0!==e.button)){if(e.currentTarget&&e.currentTarget.getAttribute){var t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}var Ai="undefined"!=typeof window;function Oi(e,t,n,r){var o=t||[],i=n||Object.create(null),a=r||Object.create(null);e.forEach((function(e){!function e(t,n,r,o,i,a){var c=o.path,u=o.name;0;var s=o.pathToRegexpOptions||{},f=function(e,t,n){n||(e=e.replace(/\/$/,""));if("/"===e[0])return e;if(null==t)return e;return ti(t.path+"/"+e)}(c,i,s.strict);"boolean"==typeof o.caseSensitive&&(s.sensitive=o.caseSensitive);var l={path:f,regex:ki(f,s),components:o.components||{default:o.component},instances:{},name:u,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?ti(a+"/"+o.path):void 0;e(t,n,r,o,l,i)}));n[l.path]||(t.push(l.path),n[l.path]=l);if(void 0!==o.alias)for(var p=Array.isArray(o.alias)?o.alias:[o.alias],d=0;d<p.length;++d){0;var _={path:p[d],children:o.children};e(t,n,r,_,i,l.path||"/")}u&&(r[u]||(r[u]=l))}(o,i,a,e)}));for(var c=0,u=o.length;c<u;c++)"*"===o[c]&&(o.push(o.splice(c,1)[0]),u--,c--);return{pathList:o,pathMap:i,nameMap:a}}function ki(e,t){return ri(e,[],t)}function Ci(e,t){var n=Oi(e),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(e,n,a){var c=yi(e,n,!1,t),s=c.name;if(s){var f=i[s];if(!f)return u(null,c);var l=f.regex.keys.filter((function(e){return!e.optional})).map((function(e){return e.name}));if("object"!=typeof c.params&&(c.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in c.params)&&l.indexOf(p)>-1&&(c.params[p]=n.params[p]);return c.path=vi(f.path,c.params),u(f,c,a)}if(c.path){c.params={};for(var d=0;d<r.length;d++){var _=r[d],g=o[_];if(Ti(g.regex,c.path,c.params))return u(g,c,a)}}return u(null,c)}function c(e,n){var r=e.redirect,o="function"==typeof r?r(Go(e,n,null,t)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return u(null,n);var c=o,s=c.name,f=c.path,l=n.query,p=n.hash,d=n.params;if(l=c.hasOwnProperty("query")?c.query:l,p=c.hasOwnProperty("hash")?c.hash:p,d=c.hasOwnProperty("params")?c.params:d,s){i[s];return a({_normalized:!0,name:s,query:l,hash:p,params:d},void 0,n)}if(f){var _=function(e,t){return ei(e,t.parent?t.parent.path:"/",!0)}(f,e);return a({_normalized:!0,path:vi(_,d),query:l,hash:p},void 0,n)}return u(null,n)}function u(e,n,r){return e&&e.redirect?c(e,r||n):e&&e.matchAs?function(e,t,n){var r=a({_normalized:!0,path:vi(n,t.params)});if(r){var o=r.matched,i=o[o.length-1];return t.params=r.params,u(i,t)}return u(null,t)}(0,n,e.matchAs):Go(e,n,r,t)}return{match:a,addRoutes:function(e){Oi(e,r,o,i)}}}function Ti(e,t,n){var r=t.match(e);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=e.keys[o-1],c="string"==typeof r[o]?decodeURIComponent(r[o]):r[o];a&&(n[a.name||"pathMatch"]=c)}return!0}var Pi=Ai&&window.performance&&window.performance.now?window.performance:Date;function $i(){return Pi.now().toFixed(3)}var ji=$i();function Li(){return ji}function Ii(e){return ji=e}var Ri=Object.create(null);function Mi(){var e=window.location.protocol+"//"+window.location.host,t=window.location.href.replace(e,""),n=Mo({},window.history.state);n.key=Li(),window.history.replaceState(n,"",t),window.addEventListener("popstate",(function(e){Bi(),e.state&&e.state.key&&Ii(e.state.key)}))}function Di(e,t,n,r){if(e.app){var o=e.options.scrollBehavior;o&&e.app.$nextTick((function(){var i=function(){var e=Li();if(e)return Ri[e]}(),a=o.call(e,t,n,r?i:null);a&&("function"==typeof a.then?a.then((function(e){Vi(e,i)})).catch((function(e){0})):Vi(a,i))}))}}function Bi(){var e=Li();e&&(Ri[e]={x:window.pageXOffset,y:window.pageYOffset})}function Ni(e){return Ui(e.x)||Ui(e.y)}function Fi(e){return{x:Ui(e.x)?e.x:window.pageXOffset,y:Ui(e.y)?e.y:window.pageYOffset}}function Ui(e){return"number"==typeof e}var Wi=/^#\d/;function Vi(e,t){var n,r="object"==typeof e;if(r&&"string"==typeof e.selector){var o=Wi.test(e.selector)?document.getElementById(e.selector.slice(1)):document.querySelector(e.selector);if(o){var i=e.offset&&"object"==typeof e.offset?e.offset:{};t=function(e,t){var n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{x:r.left-n.left-t.x,y:r.top-n.top-t.y}}(o,i={x:Ui((n=i).x)?n.x:0,y:Ui(n.y)?n.y:0})}else Ni(e)&&(t=Fi(e))}else r&&Ni(e)&&(t=Fi(e));t&&window.scrollTo(t.x,t.y)}var Hi,zi=Ai&&((-1===(Hi=window.navigator.userAgent).indexOf("Android 2.")&&-1===Hi.indexOf("Android 4.0")||-1===Hi.indexOf("Mobile Safari")||-1!==Hi.indexOf("Chrome")||-1!==Hi.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history);function qi(e,t){Bi();var n=window.history;try{if(t){var r=Mo({},n.state);r.key=Li(),n.replaceState(r,"",e)}else n.pushState({key:Ii($i())},"",e)}catch(n){window.location[t?"replace":"assign"](e)}}function Gi(e){qi(e,!0)}function Ki(e,t,n){var r=function(o){o>=e.length?n():e[o]?t(e[o],(function(){r(o+1)})):r(o+1)};r(0)}function Zi(e){return function(t,n,r){var o=!1,i=0,a=null;Xi(e,(function(e,t,n,c){if("function"==typeof e&&void 0===e.cid){o=!0,i++;var u,s=Ji((function(t){var o;((o=t).__esModule||Qi&&"Module"===o[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:wi.extend(t),n.components[c]=t,--i<=0&&r()})),f=Ji((function(e){var t="Failed to resolve async component "+c+": "+e;a||(a=Io(e)?e:new Error(t),r(a))}));try{u=e(s,f)}catch(e){f(e)}if(u)if("function"==typeof u.then)u.then(s,f);else{var l=u.component;l&&"function"==typeof l.then&&l.then(s,f)}}})),o||r()}}function Xi(e,t){return Yi(e.map((function(e){return Object.keys(e.components).map((function(n){return t(e.components[n],e.instances[n],e,n)}))})))}function Yi(e){return Array.prototype.concat.apply([],e)}var Qi="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Ji(e){var t=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!t)return t=!0,e.apply(this,n)}}var ea=function(e){function t(t){e.call(this),this.name=this._name="NavigationDuplicated",this.message='Navigating to current location ("'+t.fullPath+'") is not allowed',Object.defineProperty(this,"stack",{value:(new e).stack,writable:!0,configurable:!0})}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t}(Error);ea._name="NavigationDuplicated";var ta=function(e,t){this.router=e,this.base=function(e){if(!e)if(Ai){var t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else e="/";"/"!==e.charAt(0)&&(e="/"+e);return e.replace(/\/$/,"")}(t),this.current=Zo,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function na(e,t,n,r){var o=Xi(e,(function(e,r,o,i){var a=function(e,t){"function"!=typeof e&&(e=wi.extend(e));return e.options[t]}(e,t);if(a)return Array.isArray(a)?a.map((function(e){return n(e,r,o,i)})):n(a,r,o,i)}));return Yi(r?o.reverse():o)}function ra(e,t){if(t)return function(){return e.apply(t,arguments)}}ta.prototype.listen=function(e){this.cb=e},ta.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},ta.prototype.onError=function(e){this.errorCbs.push(e)},ta.prototype.transitionTo=function(e,t,n){var r=this,o=this.router.match(e,this.current);this.confirmTransition(o,(function(){r.updateRoute(o),t&&t(o),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(e){e(o)})))}),(function(e){n&&n(e),e&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(t){t(e)})))}))},ta.prototype.confirmTransition=function(e,t,n){var r=this,o=this.current,i=function(e){!Ro(ea,e)&&Io(e)&&(r.errorCbs.length?r.errorCbs.forEach((function(t){t(e)})):console.error(e)),n&&n(e)};if(Qo(e,o)&&e.matched.length===o.matched.length)return this.ensureURL(),i(new ea(e));var a=function(e,t){var n,r=Math.max(e.length,t.length);for(n=0;n<r&&e[n]===t[n];n++);return{updated:t.slice(0,n),activated:t.slice(n),deactivated:e.slice(n)}}(this.current.matched,e.matched),c=a.updated,u=a.deactivated,s=a.activated,f=[].concat(function(e){return na(e,"beforeRouteLeave",ra,!0)}(u),this.router.beforeHooks,function(e){return na(e,"beforeRouteUpdate",ra)}(c),s.map((function(e){return e.beforeEnter})),Zi(s));this.pending=e;var l=function(t,n){if(r.pending!==e)return i();try{t(e,o,(function(e){!1===e||Io(e)?(r.ensureURL(!0),i(e)):"string"==typeof e||"object"==typeof e&&("string"==typeof e.path||"string"==typeof e.name)?(i(),"object"==typeof e&&e.replace?r.replace(e):r.push(e)):n(e)}))}catch(e){i(e)}};Ki(f,l,(function(){var n=[];Ki(function(e,t,n){return na(e,"beforeRouteEnter",(function(e,r,o,i){return function(e,t,n,r,o){return function(i,a,c){return e(i,a,(function(e){"function"==typeof e&&r.push((function(){!function e(t,n,r,o){n[r]&&!n[r]._isBeingDestroyed?t(n[r]):o()&&setTimeout((function(){e(t,n,r,o)}),16)}(e,t.instances,n,o)})),c(e)}))}}(e,o,i,t,n)}))}(s,n,(function(){return r.current===e})).concat(r.router.resolveHooks),l,(function(){if(r.pending!==e)return i();r.pending=null,t(e),r.router.app&&r.router.app.$nextTick((function(){n.forEach((function(e){e()}))}))}))}))},ta.prototype.updateRoute=function(e){var t=this.current;this.current=e,this.cb&&this.cb(e),this.router.afterHooks.forEach((function(n){n&&n(e,t)}))};var oa=function(e){function t(t,n){var r=this;e.call(this,t,n);var o=t.options.scrollBehavior,i=zi&&o;i&&Mi();var a=ia(this.base);window.addEventListener("popstate",(function(e){var n=r.current,o=ia(r.base);r.current===Zo&&o===a||r.transitionTo(o,(function(e){i&&Di(t,e,n,!0)}))}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){qi(ti(r.base+e.fullPath)),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){Gi(ti(r.base+e.fullPath)),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.ensureURL=function(e){if(ia(this.base)!==this.current.fullPath){var t=ti(this.base+this.current.fullPath);e?qi(t):Gi(t)}},t.prototype.getCurrentLocation=function(){return ia(this.base)},t}(ta);function ia(e){var t=decodeURI(window.location.pathname);return e&&0===t.indexOf(e)&&(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var aa=function(e){function t(t,n,r){e.call(this,t,n),r&&function(e){var t=ia(e);if(!/^\/#/.test(t))return window.location.replace(ti(e+"/#"+t)),!0}(this.base)||ca()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this,t=this.router.options.scrollBehavior,n=zi&&t;n&&Mi(),window.addEventListener(zi?"popstate":"hashchange",(function(){var t=e.current;ca()&&e.transitionTo(ua(),(function(r){n&&Di(e.router,r,t,!0),zi||la(r.fullPath)}))}))},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){fa(e.fullPath),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){la(e.fullPath),Di(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;ua()!==t&&(e?fa(t):la(t))},t.prototype.getCurrentLocation=function(){return ua()},t}(ta);function ca(){var e=ua();return"/"===e.charAt(0)||(la("/"+e),!1)}function ua(){var e=window.location.href,t=e.indexOf("#");if(t<0)return"";var n=(e=e.slice(t+1)).indexOf("?");if(n<0){var r=e.indexOf("#");e=r>-1?decodeURI(e.slice(0,r))+e.slice(r):decodeURI(e)}else e=decodeURI(e.slice(0,n))+e.slice(n);return e}function sa(e){var t=window.location.href,n=t.indexOf("#");return(n>=0?t.slice(0,n):t)+"#"+e}function fa(e){zi?qi(sa(e)):window.location.hash=e}function la(e){zi?Gi(sa(e)):window.location.replace(sa(e))}var pa=function(e){function t(t,n){e.call(this,t,n),this.stack=[],this.index=-1}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.push=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index+1).concat(e),r.index++,t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index).concat(e),t&&t(e)}),n)},t.prototype.go=function(e){var t=this,n=this.index+e;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){t.index=n,t.updateRoute(r)}),(function(e){Ro(ea,e)&&(t.index=n)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(ta),da=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ci(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!zi&&!1!==e.fallback,this.fallback&&(t="hash"),Ai||(t="abstract"),this.mode=t,t){case"history":this.history=new oa(this,e.base);break;case"hash":this.history=new aa(this,e.base,this.fallback);break;case"abstract":this.history=new pa(this,e.base);break;default:0}},_a={currentRoute:{configurable:!0}};function ga(e,t){return e.push(t),function(){var n=e.indexOf(t);n>-1&&e.splice(n,1)}}da.prototype.match=function(e,t,n){return this.matcher.match(e,t,n)},_a.currentRoute.get=function(){return this.history&&this.history.current},da.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var n=t.apps.indexOf(e);n>-1&&t.apps.splice(n,1),t.app===e&&(t.app=t.apps[0]||null)})),!this.app){this.app=e;var n=this.history;if(n instanceof oa)n.transitionTo(n.getCurrentLocation());else if(n instanceof aa){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},da.prototype.beforeEach=function(e){return ga(this.beforeHooks,e)},da.prototype.beforeResolve=function(e){return ga(this.resolveHooks,e)},da.prototype.afterEach=function(e){return ga(this.afterHooks,e)},da.prototype.onReady=function(e,t){this.history.onReady(e,t)},da.prototype.onError=function(e){this.history.onError(e)},da.prototype.push=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.push(e,t,n)}));this.history.push(e,t,n)},da.prototype.replace=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.replace(e,t,n)}));this.history.replace(e,t,n)},da.prototype.go=function(e){this.history.go(e)},da.prototype.back=function(){this.go(-1)},da.prototype.forward=function(){this.go(1)},da.prototype.getMatchedComponents=function(e){var t=e?e.matched?e:this.resolve(e).route:this.currentRoute;return t?[].concat.apply([],t.matched.map((function(e){return Object.keys(e.components).map((function(t){return e.components[t]}))}))):[]},da.prototype.resolve=function(e,t,n){var r=yi(e,t=t||this.history.current,n,this),o=this.match(r,t),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(e,t,n){var r="hash"===n?"#"+t:t;return e?ti(e+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},da.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==Zo&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(da.prototype,_a),da.install=function e(t){if(!e.installed||wi!==t){e.installed=!0,wi=t;var n=function(e){return void 0!==e},r=function(e,t){var r=e.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(e,t)};t.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),t.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(t.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(t.prototype,"$route",{get:function(){return this._routerRoot._route}}),t.component("RouterView",Do),t.component("RouterLink",Si);var o=t.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},da.version="3.1.6",Ai&&window.Vue&&window.Vue.use(da);var ba=da;n(56),n(134),n(135),n(136),n(137),n(74),n(138),n(57);function ha(e){e.locales&&Object.keys(e.locales).forEach((function(t){e.locales[t].path=t})),Object.freeze(e)}n(112),n(139),n(23),n(114),n(49);var ma=n(41),va=n(45),ya={NotFound:function(){return n.e(26).then(n.bind(null,310))},Layout:function(){return Promise.all([n.e(0),n.e(4)]).then(n.bind(null,309))}},wa={"v-07f576f6":function(){return n.e(27).then(n.bind(null,314))},"v-55ea2f06":function(){return n.e(28).then(n.bind(null,315))},"v-71235e06":function(){return n.e(14).then(n.bind(null,316))},"v-7458dcb4":function(){return n.e(15).then(n.bind(null,317))},"v-9a956228":function(){return n.e(8).then(n.bind(null,318))},"v-935ace04":function(){return n.e(7).then(n.bind(null,319))},"v-c7f0409c":function(){return n.e(18).then(n.bind(null,320))},"v-3d85f24e":function(){return n.e(19).then(n.bind(null,321))},"v-c24b02f4":function(){return n.e(16).then(n.bind(null,322))},"v-13b45cbc":function(){return n.e(11).then(n.bind(null,323))},"v-085c52d5":function(){return n.e(29).then(n.bind(null,324))},"v-77b18c66":function(){return n.e(5).then(n.bind(null,325))},"v-77ecefa4":function(){return n.e(6).then(n.bind(null,326))},"v-5dc20574":function(){return n.e(17).then(n.bind(null,327))},"v-ff18da5c":function(){return n.e(30).then(n.bind(null,328))},"v-0578da5e":function(){return n.e(31).then(n.bind(null,329))},"v-5959fdec":function(){return n.e(20).then(n.bind(null,330))},"v-548430c6":function(){return n.e(32).then(n.bind(null,331))},"v-73b54474":function(){return n.e(33).then(n.bind(null,332))},"v-41e63074":function(){return n.e(9).then(n.bind(null,333))},"v-0d6f29f2":function(){return n.e(21).then(n.bind(null,334))},"v-87b76dc4":function(){return n.e(22).then(n.bind(null,335))},"v-4a02acc0":function(){return n.e(23).then(n.bind(null,336))},"v-a9b07284":function(){return n.e(24).then(n.bind(null,337))},"v-5f93f1f6":function(){return n.e(34).then(n.bind(null,338))}};function xa(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var Sa=/-(\w)/g,Ea=xa((function(e){return e.replace(Sa,(function(e,t){return t?t.toUpperCase():""}))})),Aa=/\B([A-Z])/g,Oa=xa((function(e){return e.replace(Aa,"-$1").toLowerCase()})),ka=xa((function(e){return e.charAt(0).toUpperCase()+e.slice(1)}));function Ca(e,t){if(t)return e(t)?e(t):t.includes("-")?e(ka(Ea(t))):e(ka(t))||e(Oa(t))}var Ta=Object.assign({},ya,wa),Pa=function(e){return Ta[e]},$a=function(e){return wa[e]},ja=function(e){return ya[e]},La=function(e){return Lo.component(e)};function Ia(e){return Ca($a,e)}function Ra(e){return Ca(ja,e)}function Ma(e){return Ca(Pa,e)}function Da(e){return Ca(La,e)}function Ba(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return Promise.all(t.filter((function(e){return e})).map(function(){var e=Object(r.a)(regeneratorRuntime.mark((function e(t){var n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(Da(t)||!Ma(t)){e.next=5;break}return e.next=3,Ma(t)();case 3:n=e.sent,Lo.component(t,n.default);case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()))}function Na(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}n(79),n(80),n(59),n(142);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 e=this;document.title=this.$title,document.documentElement.lang=this.$lang;var t=this.$page.frontmatter.meta||[],n=t.slice(0);0===t.filter((function(e){return"description"===e.name})).length&&n.push({name:"description",content:this.$description});var r=document.querySelectorAll('meta[name="description"]');r.length&&r.forEach((function(t){return e.currentMetaTags.add(t)})),this.currentMetaTags=new Set(Ua(n,this.currentMetaTags))}},watch:{$page:function(){this.updateMeta()}},beforeDestroy:function(){Ua(null,this.currentMetaTags)}};function Ua(e,t){if(t&&Object(va.a)(t).forEach((function(e){document.head.removeChild(e)})),e)return e.map((function(e){var t=document.createElement("meta");return Object.keys(e).forEach((function(n){t.setAttribute(n,e[n])})),document.head.appendChild(t),t}))}n(108);var Wa=n(46),Va=n.n(Wa),Ha={mounted:function(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Va()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var e=this,t=[].slice.call(document.querySelectorAll(".sidebar-link")),n=[].slice.call(document.querySelectorAll(".header-anchor")).filter((function(e){return t.some((function(t){return t.hash===e.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 c=n[a],u=n[a+1],s=0===a&&0===r||r>=c.parentElement.offsetTop+10&&(!u||r<u.parentElement.offsetTop-10),f=decodeURIComponent(this.$route.hash);if(s&&f!==decodeURIComponent(c.hash)){var l=c;if(i===o)for(var p=a+1;p<n.length;p++)if(f===decodeURIComponent(n[p].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(l.hash),(function(){e.$nextTick((function(){e.$vuepress.$set("disableScrollBehavior",!1)}))}))}}}},beforeDestroy:function(){window.removeEventListener("scroll",this.onScroll)}},za=n(47),qa=n.n(za),Ga={mounted:function(){var e=this;qa.a.configure({showSpinner:!1}),this.$router.beforeEach((function(e,t,n){e.path===t.path||Lo.component(e.name)||qa.a.start(),n()})),this.$router.afterEach((function(){qa.a.done(),e.isSidebarOpen=!1}))}};n(107);function Ka(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Za(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}n(109),n(126);var Xa={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 e={};return e[this.options.align]="7.5px",e},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(e){var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},copyToClipboard:function(e){var t=this;if(navigator.clipboard)navigator.clipboard.writeText(this.code).then((function(){t.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 e=this;if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";var t=this.hexToRgb(this.options.backgroundColor);this.parent.style.background="rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", 0.1)")}this.success=!0,this.successTimeout=setTimeout((function(){e.options.backgroundTransition&&(e.parent.style.background=e.originalBackground,e.parent.style.transition=e.originalTransition),e.success=!1}),500)}}},Ya=(n(147),n(10)),Qa=Object(Ya.a)(Xa,(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"code-copy"},[n("svg",{class:e.iconClass,style:e.alignStyle,attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},on:{click:e.copyToClipboard}},[n("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),e._v(" "),n("path",{attrs:{fill:e.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"}})]),e._v(" "),n("span",{class:e.success?"success":"",style:e.alignStyle},[e._v("\n        "+e._s(e.options.successText)+"\n    ")])])}),[],!1,null,"49140617",null).exports,Ja=(n(148),[Fa,Ha,Ga,{updated:function(){this.update()},methods:{update:function(){setTimeout((function(){document.querySelectorAll('div[class*="language-"] pre').forEach((function(e){if(!e.classList.contains("code-copy-added")){var t=new(Lo.extend(Qa));t.options=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Za(Object(n),!0).forEach((function(t){Ka(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Za(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},{align:"bottom",color:"#27b1ff",backgroundTransition:!0,backgroundColor:"#0075b8",successText:"Copied!",staticIcon:!1}),t.code=e.innerText,t.parent=e,t.$mount(),e.classList.add("code-copy-added"),e.appendChild(t.$el)}}))}),100)}}}]),ec={name:"GlobalLayout",computed:{layout:function(){var e=this.getLayout();return Na("layout",e),Lo.component(e)}},methods:{getLayout:function(){if(this.$page.path){var e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},tc=Object(Ya.a)(ec,(function(){var e=this.$createElement;return(this._self._c||e)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(e,t,n){var r;switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],n);break;case"mixins":e[t]||(e[t]=[]),(r=e[t]).push.apply(r,Object(va.a)(n));break;default:throw new Error("Unknown option name.")}}(tc,"mixins",Ja);var nc=[{name:"v-07f576f6",path:"/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-07f576f6").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-55ea2f06",path:"/beginner/tutorial1-window/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-55ea2f06").then(n)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-71235e06",path:"/beginner/tutorial2-surface/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-71235e06").then(n)}},{path:"/beginner/tutorial2-surface/index.html",redirect:"/beginner/tutorial2-surface/"},{name:"v-7458dcb4",path:"/beginner/tutorial3-pipeline/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-7458dcb4").then(n)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-9a956228",path:"/beginner/tutorial4-buffer/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-9a956228").then(n)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-935ace04",path:"/beginner/tutorial5-textures/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-935ace04").then(n)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-c7f0409c",path:"/beginner/tutorial6-uniforms/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-c7f0409c").then(n)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-3d85f24e",path:"/beginner/tutorial7-instancing/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-3d85f24e").then(n)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-c24b02f4",path:"/beginner/tutorial8-depth/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-c24b02f4").then(n)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-13b45cbc",path:"/beginner/tutorial9-models/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-13b45cbc").then(n)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-085c52d5",path:"/intermediate/pbr-notes.html",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-085c52d5").then(n)}},{name:"v-77b18c66",path:"/intermediate/tutorial10-lighting/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-77b18c66").then(n)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-77ecefa4",path:"/intermediate/tutorial11-normals/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-77ecefa4").then(n)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-5dc20574",path:"/intermediate/tutorial12-camera/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-5dc20574").then(n)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-ff18da5c",path:"/intermediate/tutorial13-threading/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-ff18da5c").then(n)}},{path:"/intermediate/tutorial13-threading/index.html",redirect:"/intermediate/tutorial13-threading/"},{name:"v-0578da5e",path:"/news/0.12/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-0578da5e").then(n)}},{path:"/news/0.12/index.html",redirect:"/news/0.12/"},{name:"v-5959fdec",path:"/news/pre-0.12/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-5959fdec").then(n)}},{path:"/news/pre-0.12/index.html",redirect:"/news/pre-0.12/"},{name:"v-548430c6",path:"/showcase/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-548430c6").then(n)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-73b54474",path:"/showcase/alignment/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-73b54474").then(n)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-41e63074",path:"/showcase/compute/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-41e63074").then(n)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-0d6f29f2",path:"/showcase/gifs/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-0d6f29f2").then(n)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-87b76dc4",path:"/showcase/imgui-demo/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-87b76dc4").then(n)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-4a02acc0",path:"/showcase/pong/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-4a02acc0").then(n)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-a9b07284",path:"/showcase/windowless/",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-a9b07284").then(n)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-5f93f1f6",path:"/todo.html",component:tc,beforeEnter:function(e,t,n){Ba("Layout","v-5f93f1f6").then(n)}},{path:"*",component:tc}],rc={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",pages:[{title:"Introduction",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/",relativePath:"README.md",key:"v-07f576f6",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:"12/29/2021, 6:57:29 PM"},{title:"Dependencies and the window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial1-window/",relativePath:"beginner/tutorial1-window/README.md",key:"v-55ea2f06",path:"/beginner/tutorial1-window/",headers:[{level:2,title:"Boring, I know",slug:"boring-i-know"},{level:2,title:"What crates are we using?",slug:"what-crates-are-we-using"},{level:2,title:"Using Rust's new resolver",slug:"using-rust-s-new-resolver"},{level:2,title:"env_logger",slug:"env-logger"},{level:2,title:"The code",slug:"the-code"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"The Surface",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Surface"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial2-surface/"},{name:"twitter:title",content:"The Surface"},{name:"twitter:url",content:"/beginner/tutorial2-surface/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial2-surface/",relativePath:"beginner/tutorial2-surface/README.md",key:"v-71235e06",path:"/beginner/tutorial2-surface/",headers:[{level:2,title:"First, some housekeeping: State",slug:"first-some-housekeeping-state"},{level:2,title:"State::new()",slug:"state-new"},{level:3,title:"Instance and Adapter",slug:"instance-and-adapter"},{level:3,title:"The Surface",slug:"the-surface-2"},{level:3,title:"Device and Queue",slug:"device-and-queue"},{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:"Validation Errors?",slug:"validation-errors"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"The Pipeline",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial3-pipeline/",relativePath:"beginner/tutorial3-pipeline/README.md",key:"v-7458dcb4",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:"12/29/2021, 6:57:29 PM"},{title:"Buffers and Indices",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial4-buffer/",relativePath:"beginner/tutorial4-buffer/README.md",key:"v-9a956228",path:"/beginner/tutorial4-buffer/",headers:[{level:2,title:"We're finally talking about them!",slug:"we-re-finally-talking-about-them"},{level:2,title:"What is a buffer?",slug:"what-is-a-buffer"},{level:2,title:"The vertex buffer",slug:"the-vertex-buffer"},{level:2,title:"So what do I do with it?",slug:"so-what-do-i-do-with-it"},{level:2,title:"The index buffer",slug:"the-index-buffer"},{level:2,title:"Color Correction",slug:"color-correction"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Textures and bind groups",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial5-textures/",relativePath:"beginner/tutorial5-textures/README.md",key:"v-935ace04",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:"12/29/2021, 6:57:29 PM"},{title:"Uniform buffers and a 3d camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial6-uniforms/",relativePath:"beginner/tutorial6-uniforms/README.md",key:"v-c7f0409c",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 uniform in the vertex shader",slug:"using-the-uniform-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:"12/29/2021, 6:57:29 PM"},{title:"Instancing",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial7-instancing/",relativePath:"beginner/tutorial7-instancing/README.md",key:"v-3d85f24e",path:"/beginner/tutorial7-instancing/",headers:[{level:2,title:"The Instance Buffer",slug:"the-instance-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"The Depth Buffer",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial8-depth/",relativePath:"beginner/tutorial8-depth/README.md",key:"v-c24b02f4",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:"12/29/2021, 6:57:29 PM"},{title:"Model Loading",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial9-models/",relativePath:"beginner/tutorial9-models/README.md",key:"v-13b45cbc",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:"12/29/2021, 6:57:29 PM"},{title:"Sources",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Sources"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/pbr-notes.html"},{name:"twitter:title",content:"Sources"},{name:"twitter:url",content:"/intermediate/pbr-notes.html"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/pbr-notes.html",relativePath:"intermediate/pbr-notes.md",key:"v-085c52d5",path:"/intermediate/pbr-notes.html",lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Working with Lights",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial10-lighting/",relativePath:"intermediate/tutorial10-lighting/README.md",key:"v-77b18c66",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:"12/29/2021, 6:57:29 PM"},{title:"Normal Mapping",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial11-normals/",relativePath:"intermediate/tutorial11-normals/README.md",key:"v-77ecefa4",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:"12/29/2021, 6:57:29 PM"},{title:"A Better Camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial12-camera/",relativePath:"intermediate/tutorial12-camera/README.md",key:"v-5dc20574",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:"12/29/2021, 6:57:29 PM"},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial13-threading/",relativePath:"intermediate/tutorial13-threading/README.md",key:"v-ff18da5c",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:"12/29/2021, 6:57:29 PM"},{title:"Update to 0.12!",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Update to 0.12!"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/0.12/"},{name:"twitter:title",content:"Update to 0.12!"},{name:"twitter:url",content:"/news/0.12/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/0.12/",relativePath:"news/0.12/readme.md",key:"v-0578da5e",path:"/news/0.12/",headers:[{level:2,title:"Multi view added",slug:"multi-view-added"},{level:2,title:"No more block attribute",slug:"no-more-block-attribute"},{level:2,title:"More validation",slug:"more-validation"},{level:2,title:"Misc",slug:"misc"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"News (Pre 0.12)",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"News (Pre 0.12)"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/pre-0.12/"},{name:"twitter:title",content:"News (Pre 0.12)"},{name:"twitter:url",content:"/news/pre-0.12/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/pre-0.12/",relativePath:"news/pre-0.12/readme.md",key:"v-5959fdec",path:"/news/pre-0.12/",headers:[{level:2,title:"Pong working on the web",slug:"pong-working-on-the-web"},{level:2,title:"0.12 further changes to Surface",slug:"_0-12-further-changes-to-surface"},{level:2,title:"Pong is fixed for 0.10",slug:"pong-is-fixed-for-0-10"},{level:2,title:"0.10 SwapChain is dead, long live the Surface!",slug:"_0-10-swapchain-is-dead-long-live-the-surface"},{level:2,title:"Pong and imgui demos are fixed!",slug:"pong-and-imgui-demos-are-fixed"},{level:2,title:"0.8 and WGSL",slug:"_0-8-and-wgsl"},{level:3,title:"The GLSL shaders have been translated to WGSL",slug:"the-glsl-shaders-have-been-translated-to-wgsl"},{level:3,title:"Shaderc has been removed",slug:"shaderc-has-been-removed"},{level:3,title:"Some of the showcase examples are broken",slug:"some-of-the-showcase-examples-are-broken"},{level:3,title:"Various API changes",slug:"various-api-changes"},{level:2,title:"0.7",slug:"_0-7"},{level:2,title:"November 2020 Cleanup, Content Freeze, and Patreon",slug:"november-2020-cleanup-content-freeze-and-patreon"},{level:2,title:"0.6",slug:"_0-6"},{level:2,title:"Added Pong Showcase",slug:"added-pong-showcase"},{level:2,title:"Normal mapping",slug:"normal-mapping"},{level:2,title:"0.5!",slug:"_0-5"},{level:2,title:"Reworked lighting tutorial",slug:"reworked-lighting-tutorial"},{level:2,title:"Added GIF showcase",slug:"added-gif-showcase"},{level:2,title:"Updated texture tutorials",slug:"updated-texture-tutorials"},{level:2,title:"Fixed panics do to not specifying the correct usage",slug:"fixed-panics-do-to-not-specifying-the-correct-usage"},{level:2,title:"Updating Winit from 0.20.0-alpha5 to 0.20",slug:"updating-winit-from-0-20-0-alpha5-to-0-20"},{level:2,title:"Changed tutorial examples to use a src directory",slug:"changed-tutorial-examples-to-use-a-src-directory"},{level:2,title:"Updating to 0.4 from 0.3",slug:"updating-to-0-4-from-0-3"},{level:2,title:"New/Recent Articles",slug:"new-recent-articles"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Foreward",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-548430c6",path:"/showcase/",lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Memory Layout in WGSL",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Memory Layout in WGSL"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/alignment/"},{name:"twitter:title",content:"Memory Layout in WGSL"},{name:"twitter:url",content:"/showcase/alignment/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/alignment/",relativePath:"showcase/alignment/README.md",key:"v-73b54474",path:"/showcase/alignment/",headers:[{level:2,title:"Alignment of vertex and index buffers",slug:"alignment-of-vertex-and-index-buffers"},{level:2,title:"Alignment of Uniform and Storage buffers",slug:"alignment-of-uniform-and-storage-buffers"},{level:2,title:"How to deal with alignment issues",slug:"how-to-deal-with-alignment-issues"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Compute Example: Tangents and Bitangents",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/compute/",relativePath:"showcase/compute/README.md",key:"v-41e63074",path:"/showcase/compute/",headers:[{level:2,title:"Possible Improvements",slug:"possible-improvements"},{level:2,title:"Results",slug:"results"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Creating gifs",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/gifs/",relativePath:"showcase/gifs/README.md",key:"v-0d6f29f2",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:"12/29/2021, 6:57:29 PM"},{title:"Basic Imgui Demo",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-87b76dc4",path:"/showcase/imgui-demo/",lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Pong",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/pong/",relativePath:"showcase/pong/README.md",key:"v-4a02acc0",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:"WASM Support",slug:"wasm-support"},{level:2,title:"Summary",slug:"summary"}],lastUpdated:"12/29/2021, 6:57:29 PM"},{title:"Wgpu without a window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/windowless/",relativePath:"showcase/windowless/README.md",key:"v-a9b07284",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:"12/29/2021, 6:57:29 PM"},{title:"Coming Soon!",frontmatter:{meta:[{property:"article:modified_time",content:"2021-12-29T18:57:29.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 Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/todo.html",relativePath:"todo.md",key:"v-5f93f1f6",path:"/todo.html",lastUpdated:"12/29/2021, 6:57:29 PM"}],themeConfig:{author:{name:"Benjamin Hansen",twitter:"https://twitter.com/sotrh760"},displayAllHeaders:!1,lastUpdated:"Last Updated",sidebar:["/",{title:"Beginner",collapsable:!1,children:["/beginner/tutorial1-window/","/beginner/tutorial2-surface/","/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/"]},{title:"News",collapsable:!0,children:["/news/0.12/","/news/pre-0.12/"]}]}};n(149);Lo.component("AutoGithubLink",(function(){return n.e(25).then(n.bind(null,311))})),Lo.component("RecentArticles",(function(){return n.e(12).then(n.bind(null,312))})),Lo.component("WasmExample",(function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,313))})),Lo.component("Badge",(function(){return Promise.all([n.e(0),n.e(13)]).then(n.bind(null,339))}));n(150),n(151);var oc={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:function(){return{scrollTop:null}},computed:{show:function(){return this.scrollTop>this.threshold}},mounted:function(){var e=this;this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Va()((function(){e.scrollTop=e.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}}},ic=(n(152),Object(Ya.a)(oc,(function(){var e=this.$createElement,t=this._self._c||e;return t("transition",{attrs:{name:"fade"}},[this.show?t("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[t("g",{attrs:{transform:"translate(-229 -126.358)"}},[t("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),t("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),ac=[{},function(e){e.Vue.mixin({computed:{$dataBlock:function(){return this.$options.__data__block__}}})},{},{},function(e){e.Vue.component("CodeCopy",Qa)},function(e){e.Vue.component("BackToTop",ic)}],cc=["BackToTop"];n(119);function uc(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function sc(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function fc(e,t,n){return t&&sc(e.prototype,t),n&&sc(e,n),e}function lc(e,t){return(lc=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function pc(e){return(pc=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function dc(){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(e){return!1}}function _c(e,t){return!t||"object"!==Object(ma.a)(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}var gc=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&lc(e,t)}(r,e);var t,n=(t=r,function(){var e,n=pc(t);if(dc()){var r=pc(this).constructor;e=Reflect.construct(n,arguments,r)}else e=n.apply(this,arguments);return _c(this,e)});function r(){return uc(this,r),n.apply(this,arguments)}return r}(function(){function e(){uc(this,e),this.store=new Lo({data:{state:{}}})}return fc(e,[{key:"$get",value:function(e){return this.store.state[e]}},{key:"$set",value:function(e,t){Lo.set(this.store.state,e,t)}},{key:"$emit",value:function(){var e;(e=this.store).$emit.apply(e,arguments)}},{key:"$on",value:function(){var e;(e=this.store).$on.apply(e,arguments)}}]),e}());Object.assign(gc.prototype,{getPageAsyncComponent:Ia,getLayoutAsyncComponent:Ra,getAsyncComponent:Ma,getVueComponent:Da});var bc={install:function(e){var t=new gc;e.$vuepress=t,e.prototype.$vuepress=t}};function hc(e){e.beforeEach((function(t,n,r){if(mc(e,t.path))r();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){var o=t.path.replace(/\/$/,"")+".html";mc(e,o)?r(o):r()}else r();else{var i=t.path+"/",a=t.path+".html";mc(e,a)?r(a):mc(e,i)?r(i):r()}}))}function mc(e,t){return e.options.routes.filter((function(e){return e.path.toLowerCase()===t.toLowerCase()})).length>0}var vc={props:{pageKey:String,slotKey:{type:String,default:"default"}},render:function(e){var t=this.pageKey||this.$parent.$page.key;return Na("pageKey",t),Lo.component(t)||Lo.component(t,Ia(t)),Lo.component(t)?e(t):e("")}},yc={functional:!0,props:{slotKey:String,required:!0},render:function(e,t){var n=t.props,r=t.slots;return e("div",{class:["content__".concat(n.slotKey)]},r()[n.slotKey])}},wc=(n(153),Object(Ya.a)({},(function(e,t){var n=t._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"}}),t._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 xc(){return(xc=Object(r.a)(regeneratorRuntime.mark((function e(t){var n,r,o,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:rc.routerBase||rc.base,hc(r=new ba({base:n,mode:"history",fallback:!1,routes:nc,scrollBehavior:function(e,t,n){return n||(e.hash?!Lo.$vuepress.$get("disableScrollBehavior")&&{selector:e.hash}:{x:0,y:0})}})),o={},e.prev=4,e.next=7,Promise.all(ac.filter((function(e){return"function"==typeof e})).map((function(e){return e({Vue:Lo,options:o,router:r,siteData:rc,isServer:t})})));case 7:e.next=12;break;case 9:e.prev=9,e.t0=e.catch(4),console.error(e.t0);case 12:return i=new Lo(Object.assign(o,{router:r,render:function(e){return e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},cc.map((function(t){return e(t)})))])}})),e.abrupt("return",{app:i,router:r});case 14:case"end":return e.stop()}}),e,null,[[4,9]])})))).apply(this,arguments)}Lo.config.productionTip=!1,Lo.use(ba),Lo.use(bc),Lo.mixin(function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Lo;ha(t),n.$vuepress.$set("siteData",t);var r=e(n.$vuepress.$get("siteData")),o=new r,i=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(i).reduce((function(e,t){return t.startsWith("$")&&(e[t]=i[t].get),e}),a),{computed:a}}((function(e){return function(){function t(){uc(this,t)}return fc(t,[{key:"setPage",value:function(e){this.__page=e}},{key:"$site",get:function(){return e}},{key:"$themeConfig",get:function(){return this.$site.themeConfig}},{key:"$frontmatter",get:function(){return this.$page.frontmatter}},{key:"$localeConfig",get:function(){var e,t,n=this.$site.locales,r=void 0===n?{}:n;for(var o in r)"/"===o?t=r[o]:0===this.$page.path.indexOf(o)&&(e=r[o]);return e||t||{}}},{key:"$siteTitle",get:function(){return this.$localeConfig.title||this.$site.title||""}},{key:"$title",get:function(){var e=this.$page,t=this.$page.frontmatter.metaTitle;if("string"==typeof t)return t;var n=this.$siteTitle,r=e.frontmatter.home?null:e.frontmatter.title||e.title;return n?r?r+" | "+n:n:r||"VuePress"}},{key:"$description",get:function(){var e=function(e){if(e){var t=e.filter((function(e){return"description"===e.name}))[0];if(t)return t.content}}(this.$page.frontmatter.meta);return e||(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(e,t){for(var n=0;n<e.length;n++){var r=e[n];if(r.path.toLowerCase()===t.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}}]),t}()}),rc)),Lo.component("Content",vc),Lo.component("ContentSlotsDistributor",yc),Lo.component("OutboundLink",wc),Lo.component("ClientOnly",{functional:!0,render:function(e,t){var n=t.parent,r=t.children;if(n._isMounted)return r;n.$once("hook:mounted",(function(){n.$forceUpdate()}))}}),Lo.component("Layout",Ra("Layout")),Lo.component("NotFound",Ra("NotFound")),Lo.prototype.$withBase=function(e){var t=this.$site.base;return"/"===e.charAt(0)?t+e.slice(1):e},window.__VUEPRESS__={version:"1.4.0",hash:"c0843b3"},function(e){return xc.apply(this,arguments)}(!1).then((function(e){var t=e.app;e.router.onReady((function(){t.$mount("#app")}))}))}]);
\ No newline at end of file
diff --git a/beginner/tutorial1-window/index.html b/beginner/tutorial1-window/index.html
index f25bcece..0ebe15a6 100644
--- a/beginner/tutorial1-window/index.html
+++ b/beginner/tutorial1-window/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.f4a55ac6.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.f4a55ac6.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -54,7 +54,7 @@ This means if you don't include <code>env_logger::init()</code> wgpu will fail s
     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 
-</code></pre></div><p>All this does is create a window, and keep it open until the user closes it, or presses escape. In the next tutorial we'll actually start using wgpu!</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial1-window/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>All this does is create a window, and keep it open until the user closes it, or presses escape. In the next tutorial we'll actually start using wgpu!</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial1-window/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/" class="prev router-link-active">
           Introduction
@@ -63,6 +63,6 @@ This means if you don't include <code>env_logger::init()</code> wgpu will fail s
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/28.f4a55ac6.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/28.f4a55ac6.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial2-surface/index.html b/beginner/tutorial2-surface/index.html
index e34580fb..eb056417 100644
--- a/beginner/tutorial2-surface/index.html
+++ b/beginner/tutorial2-surface/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-12-29T18:33:55.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Surface"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial2-surface/"><meta name="twitter:title" content="The Surface"><meta name="twitter:url" content="/beginner/tutorial2-surface/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.6c6630a3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Surface"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial2-surface/"><meta name="twitter:title" content="The Surface"><meta name="twitter:url" content="/beginner/tutorial2-surface/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.1aaaa4a4.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -200,7 +200,7 @@ event_loop<span class="token punctuation">.</span><span class="token function">r
 event_loop<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">move</span> <span class="token closure-params"><span class="token closure-punctuation punctuation">|</span>event<span class="token punctuation">,</span> _<span class="token punctuation">,</span> control_flow<span class="token closure-punctuation punctuation">|</span></span> <span class="token punctuation">{</span>
     <span class="token keyword">match</span> event <span class="token punctuation">{</span>
         <span class="token comment">// ...</span>
-        <span class="token class-name">Event</span><span class="token punctuation">::</span><span class="token class-name">RedrawRequested</span><span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token class-name">Event</span><span class="token punctuation">::</span><span class="token class-name">RedrawRequested</span><span class="token punctuation">(</span>window_id<span class="token punctuation">)</span> <span class="token keyword">if</span> window_id <span class="token operator">==</span> window<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
             state<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
             <span class="token keyword">match</span> state<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                 <span class="token class-name">Ok</span><span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
@@ -240,7 +240,7 @@ event_loop<span class="token punctuation">.</span><span class="token function">r
         store<span class="token punctuation">:</span> <span class="token boolean">true</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>The <code>RenderPassColorAttachment</code> has the <code>view</code> field which informs <code>wgpu</code> what texture to save the colors to. In this case we specify <code>frame.view</code> that we created using <code>surface.get_current_texture()</code>. This means that any colors we draw to this attachment will get drawn to the screen.</p> <p>The <code>resolve_target</code> is the texture that will receive the resolved output. This will be the same as <code>view</code> unless multisampling is enabled. We don't need to specify this, so we leave it as <code>None</code>.</p> <p>The <code>ops</code> field takes a <code>wpgu::Operations</code> object. This tells wgpu what to do with the colors on the screen (specified by <code>frame.view</code>). The <code>load</code> field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The <code>store</code> field tells wgpu whether we want to store the rendered results to the <code>Texture</code> behind our <code>TextureView</code> (in this case it's the <code>SurfaceTexture</code>). We use <code>true</code> as we do want to store our render results. There are cases when you wouldn't want to but those</p> <div class="note"><p>It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.</p> <p><img src="/learn-wgpu/assets/img/no-clear.753f913f.png" alt="./no-clear.png"></p></div> <h2 id="validation-errors"><a href="#validation-errors" class="header-anchor">#</a> Validation Errors?</h2> <p>If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version <code>1.2.182</code> as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at <a href="https://github.com/gfx-rs/wgpu" target="_blank" rel="noopener noreferrer">https://github.com/gfx-rs/wgpu<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></a></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Modify the <code>input()</code> method to capture mouse events, and update the clear color using that. <em>Hint: you'll probably need to use <code>WindowEvent::CursorMoved</code></em>.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial2-surface/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>The <code>RenderPassColorAttachment</code> has the <code>view</code> field which informs <code>wgpu</code> what texture to save the colors to. In this case we specify <code>frame.view</code> that we created using <code>surface.get_current_texture()</code>. This means that any colors we draw to this attachment will get drawn to the screen.</p> <p>The <code>resolve_target</code> is the texture that will receive the resolved output. This will be the same as <code>view</code> unless multisampling is enabled. We don't need to specify this, so we leave it as <code>None</code>.</p> <p>The <code>ops</code> field takes a <code>wpgu::Operations</code> object. This tells wgpu what to do with the colors on the screen (specified by <code>frame.view</code>). The <code>load</code> field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The <code>store</code> field tells wgpu whether we want to store the rendered results to the <code>Texture</code> behind our <code>TextureView</code> (in this case it's the <code>SurfaceTexture</code>). We use <code>true</code> as we do want to store our render results. There are cases when you wouldn't want to but those</p> <div class="note"><p>It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.</p> <p><img src="/learn-wgpu/assets/img/no-clear.753f913f.png" alt="./no-clear.png"></p></div> <h2 id="validation-errors"><a href="#validation-errors" class="header-anchor">#</a> Validation Errors?</h2> <p>If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version <code>1.2.182</code> as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at <a href="https://github.com/gfx-rs/wgpu" target="_blank" rel="noopener noreferrer">https://github.com/gfx-rs/wgpu<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></a></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Modify the <code>input()</code> method to capture mouse events, and update the clear color using that. <em>Hint: you'll probably need to use <code>WindowEvent::CursorMoved</code></em>.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial2-surface/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial1-window/" class="prev">
           Dependencies and the window
@@ -249,6 +249,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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/14.6c6630a3.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/14.1aaaa4a4.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html
index cf07f0aa..e3ed8454 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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/15.ceea0609.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/15.ceea0609.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -142,7 +142,7 @@ fn fs_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">12/29/2021, 6:33:55 PM</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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial2-surface/" class="prev">
           The Surface
@@ -151,6 +151,6 @@ fn fs_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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/15.ceea0609.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/15.ceea0609.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial4-buffer/index.html b/beginner/tutorial4-buffer/index.html
index 4ecff730..3e6484a6 100644
--- a/beginner/tutorial4-buffer/index.html
+++ b/beginner/tutorial4-buffer/index.html
@@ -7,8 +7,8 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2021-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/8.b80b1345.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/8.b80b1345.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -247,7 +247,7 @@ render_pass<span class="token punctuation">.</span><span class="token function">
 render_pass<span class="token punctuation">.</span><span class="token function">set_vertex_buffer</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">self</span><span class="token punctuation">.</span>vertex_buffer<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">..</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 render_pass<span class="token punctuation">.</span><span class="token function">set_index_buffer</span><span class="token punctuation">(</span><span class="token keyword">self</span><span class="token punctuation">.</span>index_buffer<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">..</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">IndexFormat</span><span class="token punctuation">::</span><span class="token class-name">Uint16</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1.</span>
 render_pass<span class="token punctuation">.</span><span class="token function">draw_indexed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">..</span><span class="token keyword">self</span><span class="token punctuation">.</span>num_indices<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">..</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2.</span>
-</code></pre></div><p>A couple things to note:</p> <ol><li>The method name is <code>set_index_buffer</code> not <code>set_index_buffers</code>. You can only have one index buffer set at a time.</li> <li>When using an index buffer, you need to use <code>draw_indexed</code>. The <code>draw</code> method ignores the index buffer. Also make sure you use the number of indices (<code>num_indices</code>), not vertices as your model will either draw wrong, or the method will <code>panic</code> because there are not enough indices.</li></ol> <p>With all that you should have a garishly magenta pentagon in your window.</p> <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyIAAAJzCAYAAADz6Ke4AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AABxWSURBVHic7d1bsF31fdjx397nJkBIQkJHIMkgyR7AiICsCNKY4DQ2DlM3GafutONO7ekDY0/97LzVL50y09u00850PLVbj6e1k/SSJm2atDGBMWFC4hqZYIK5CoRs3c45SEdXdDln79UHIaHLkXQue//2unw+T9LR2Uv/EWit9d2/9d9qrV+/viiKZfGLX/nH8ZmbXojdh2+MtWvXxujoaAAAACzFzMxMTE9Px4svvhg7d+6MTqcTrVYrhouiiBUrRuK+2Tfjzvs/E1945JEYGxsb9HoBAICaOH78eOzcuTOee+65+O53vxvHjh2L4aGhofj85z8fX/3qVyMiYnp6Orrd7oCXCgAA1MXQ0FDcf//9sWPHjoiI+MY3vhHDO3bsiE996lPRarXi2LFjA14iAABQN51OJzqdTpw5cyYeeuih2LlzZwzfe++98cADD8SJEyeiKIpBrxEAAKixu+66K7Zt2xbD4+PjsWLFCtMQAACg74aHh2P16tXRHh0djU6nM+j1AAAADTEyMhLDEeee2fJYFgAAkEWIAAAA6doR4dEsgCrq7o8/+0//Nv7Nf3wqdp/t42v6vaYrdOKdJ78e//Jf/Kv47y+9F94mAxiciYmJ+PGPf3zJP+9RFEW89NJLceDAgSUd20QEoKqKiGJmNmbPdiOKbhRFa1GvKU7vi5f/8mAs37o9Nq+YxzF6vaY5jI61I6IVo2Nt1yeAefje974XERGPPfZYz445PT19IULa7XZs3bo1iqKIl19+OQ4cOBAHDx6MsbGxuOWWWxZ1/OGIiG6360QPUDXtTfFr/+ifx98uZuPY5LvxXnce5/ErXtONE2/8IJ7+88PxsTu3xaab2/lrukIRrdb7AVMUEUVhKgIwT728px8fH48tW7bErl27Yt++fdFqtaLT6VyYhHz4wx+O8fHxOHt2cSPwCxMRAAbtZLz0u/8hntxzU/z85x+PX9nQinf/4jvxn5+bjGL5tvg7X3o07mhPx/O//e3404m18Utf+Hgc+Xf/M16e2RKf+crfinuH344//ve/H29sfDQ+u3FvPPv8rnj3zEis3vIL8elf/flYPxYRs6/E73zt999/zWfj9rf/JP7o2XdittuNH/7Wv44ftm6In/vcP4zHNg/lrSkizk78ZfzJkz+IXYdm46aND8S2NWPRipMX/mSKU/vihWeejRfemoiTnbFYtfGe+IVf/qX46K1nF7a+f/CF+Gtrljj1AWiImZmZeOihh2J4eDhee+212Lt374Vfu+eee2L79u1x6NChRR/fo1kApbE87rp3Qzz9zt6YnDga3fWjMTk5HTEyEkOnpmLqaDc+tGwiDh4qor36nvjo+LJ4oR0RrbEYaxVRxFiMtSNm3v5+/N6em2P9nR+K1T/bHVOv/2k8ecuG+OLD66L9/vecf81sMRzLRiOK02Nx+70fi00rl8XGW1sXXRMS1jS7N577w+/Ha9NFjNyyPlaeeiWee/G9KKIdEUUU3UPxoz/4vXhm79lYtubO2HTDkfjpOz+K//Pue9H+wt9c2PrWRhQd1zugHp566qkr7uGffPLJCz/+9Kc/vaTjF0URU1NTsW3btpiYmIjp6emIiFi9enVs27YtpqamlnR8IQJQGp24YcPmWN3+aRzcdzBO3bcs9u/vxm3bH4zRnS/EgcnTMbNsf+ybibhxyx2xanbmg5cWxYXzeNEdjfv+/m/GF39uNN574dvxxH95JY4cOhxnivFYdvG5vmjH+gf/Rmx/86V45/hN8ZFHfi0+c2crTh89HMfPFmlrGj2wK3Yd7UZrzcPx+Fc/Fx8ZPRY/+OY/jd99oxsRRXQOvBJ/te9MtG/96/Hl3/z1uGPodLzyO/8svv3Cm/Hia0fi7o8sYH2dInQIkOGpp5665q8/+uijfV9DL+7vi6KIZ5999kKEREQcPnw4nnnmmdi6desHj9IugkezAEqke8sdsfnGiOf3H4yJqWWx//QNsfmue2P0zefjpYmpeHdsX7wXI3HvpvHoxr65D9LeEJtWT8f+A91oja2Km1oRx85ttbhMEWeOTceZ4tyPZ08ciqmpKy8o/V7TzKkTcbLbitFNm2Pl4X2xrzsUt25aG+03JiIiYub4kTjabcXIxvWxbHJf7C/asfKO9TH0ozfi0JHpmF3I+rzpBtTIl770pQs//uY3vxkREV/+8pcvfO3tt99e0vGLooif/OQncfDgwYiI2Lp1a3S73Xj11Vcv+dpiY8REBKBEitlbY9OmkXj+1ak4uGc0Drc2xC+uXhVjG4fizyf3x56RQ1G074zNtxWX3lRfNH2I9ki0u50oWhHd2fPf07r0ey685pLffY5Y6f+aon3uAtbqno1TnSLaMRNnO+cvakXE0Psb6Ltn43S3iKHoxOmZcx8j2WoPL359AH10cRDM5a233lry7zHXMXpx3POOHj0ak5OTERFx9913x3333RcR59rhjTfeiMnJydi4cWOsXLlyUcf3qVkAZVK0Yt3mjdH+yUS8s2csYs0DMT4UMbL+tmjt3h27h7vRWrclNgx3o5i96GWXRUXRKaJox0WfNlVc+T3vfxpVq92KKDoxM9ONopjjU7P6vKaRlbfE8lYRx362O/afXR8bhk/Gvp9ORffcQWJ07bpY0341pvbuiQNnN8aGkdOx950D0Wm1Y3zd6mh1Y/7r++Bj8AH6ateuXQP5fXv9qVmf/OQnY8+ePZfsCdm+fXt0u93YtGlTjI6OxunTpxd1/AsTkaU83wVAr3RjdP3mWNvaHQcPnIqxbbfFzUU3Yvz2uPHk83GwiFi5dWMsLyJmr3+weRiLVatvjFZxPH78f/9rTKxox+qPfS5+5cMjaWtqjW+N+9f8v3j20M74g9/aG2vHTsbUodmIeP+6tOZj8chdP4z/8foHvz4xeSLi5m3x8Y/eFNGZTf4zAyif8xOYXgbQ6dOnY/ny5bFjx46YmJi48PXJycl48MEH4+TJk3HixIlFH/9CiAwNDV3vewFI0Fn+odiyIuLgkVas37Amut0iYtXtcXu7iNc7N8SWO26J2W7nyunGHD+//ve0YsPDvxEfP/C/4vmfvRsTcVtsXnHlPyLYzzV1Z9fEL3/xc3Hiv/1x/NXE0Ti78VPx+GOT8Z3v/CiiiOieGYqP/r2vxN998n/H91/cHQdOjsaaux6JX/3so3Fn53CcKBawviX+twEoqzfffLMvxz1+/HgcP378iq+f3yOyFK2vf/3rxSc+8YkYGRm5/ncD0H+tG2N888ZYNVzEqcl34mdHZiKGV8bGzevixlYnju/fHQdOdCNaN8W6LRtiZftEHHxrfxwrLvt5N6J1w3hs+tCqGH5vMnbvPRKzl7+mG9EauTnGb18bN48NRXTOxpGDP4133yvy1hQR7WWrYt26NbF8NGLm5HRMnhiN22+7OU5PvB37jnYihpbFqltvjVXLb4iRdjdmTh2Pw1PvxrEz3YWtD4BSePrpp8+FyMMPPxzLli0b9HoAAIAGePrpp889mjU2NmazOgAAkGY4ore76wEAAK5njs9pBAAA6C8TEQAAIN1wRMQ/+e3vD3odAABAQzyyvuXRLAAAIJ8QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAaiYx5+4e9BLAIAlGx70AgCYv/MRcnGMfOtrrw9qOQCwaEIEoAKuNQU5/2uCBIAqESIAJTffR7FMSQCoEiECUGKL3Q8iSgAoOyECUFK92pQuSgAoIyECUDL9/FQs+0kAKAshAlAiWR/Na0oCwKAJEYCSGNS/DyJKABgEIQIwYGX6Bwo9ugVAFiECMEBlipCLmZIA0G9CBGBAyhohlxMlAPSDEAEYgKpEyOVECQC9IkQAElU1QOZiPwkASyFEAJLUKUIuZkoCwGIIEYAEdY2Qy4kSAOZLiAD0UVMCZC6iBIBraQ96AQB11eQIudzjT9ztzwOAS5iIAPSBm+65mZIAcJ4QAegxETI/ogSg2YQIQI8IkMUTJQDNY48IQA+IkN6xnwSgGUxEAJbITXN/mJIA1JsQAVgkAZJHlADUj0ezABZBhAyOR7cA6sFEBGCB3ASXgykJQLUJEYAFECHlJEoAqkeIAMyDAKkOUQJQDfaIAFyHCKku+0kAystEBOAa3MTWgykJQPkIEYA5CJD6EiUA5SBEAC4jQppDlAAMjj0iABcRIc1lPwlALhMRgBAgfMCUBCCHEAEaT4RwNaIEoH+ECNBoIoT5EiUAvWWPCNBYIoTFsp8EYOlMRIDGcQNJr5iSACyeEAEaRYTQL6IEYGE8mgU0hgghi0e3AK7PRASoPTeEDIopCcDVCRGg1kQIZSFKAC4lRIDaEiGUlSgBsEcEqCkRQlXYTwI0lYkIUCtu6KgqUxKgaYQIUBsihLoQJUATCBGgFkQIdSVKgLoSIkClCRCa5Pz/74IEqAMhAlSWCKGpTEmAOhAiQCWJEDhHlABVJUSAyhEhMDdRAlSJEAEqQ4DA/NlPApSdEAEqQYTA4piSAGUlRIDSEyHQG6IEKBMhApSWAIH+ESXAoLUHvQCAuYgQyPP4E3f7OwekMxEBSscNEQyGKQmQSYgApSJCoBxECdBvQgQoBQEC5eWjgIF+ECLAwIkQqAZTEqCXhAgwUCIEqkmUAEslRICBECBQH6IEWAwf3wukEyFQXz4KGJgvExEglRsUaAZTEuB6hAiQRoRAM4kSYC5CBOg7AQKcJ0qA8+wRAfpKhABXYz8JNJuJCNA3bjCA+TAlgWYSIkDPCRBgsUQJNIcQAXpKhAC9Ikqg3uwRAXpGhAD9Yj8J1I+JCNATbhCADKYkUB9CBFgSAQIMiiiBavNoFrBoIgQoC49uQfWYiACL4oIPlJEpCVSHEAEWRIAAVSFKoNyECDBvIgSoKlEC5WOPCDAvIgSoC/tJoByECHBdLtgAQK95NAu4KgECAPSLiQgwJxECAPSTEAGuIEIAgH7zaBZwgQABALKYiAARIUKAZvERvjB4QgQQIQBAOiECDSdCAIBBsEcEGkqAAACDZCICDSRCAIBBEyLQMCIEACgDj2ZBQwgQgHN8YhaUg4kINIAIAQDKRohAzYkQAKCMhAjUmAgBAMrKHhGoIQECAJSdiQjUjAgBuDob1aE8hAjUiAgBAKrCo1lQAwIEAKgaExGoOBECAFSREIEKEyEAQFUJEagoEQKwMDaqQ7nYIwIVI0AAgDowEYEKESEAQF0IEagIEQIA1IlHs6DkBAgAUEcmIlBiIgQAqCshAiUlQgB6xydmQfkIESghEQIA1J09IlAiAgQAaAoTESgJEQIANIkQgRIQIQBA03g0CwZIgAD0n43qUE4mIjAgIgQAaDIhAgMgQgCApvNoFiQSIAAA55iIQBIRAgDwASECCUQIwGDYqA7lJUSgz0QIAMCV7BGBPhEgAABXZyICfSBCAACuTYhAj4kQAIDr82gW9IgAAQCYPxMR6AERAlA+PjELyk2IwBKJEACAhRMisAQiBABgcewRgUUQIAAAS2MiAgskQgAAlk6IwAKIEIBqsFEdyk+IwDyJEACA3hEiME/eXQMA6B0hAgsgRgAAekOIAAAA6YQILJCpCEC5OU9DNQgRWAQXOQCApREiAABAOiECi2QqAgCweEIElkCMAAAsjhCBJRIjAAALJ0QAgNrw5hBUhxCBHnDhAwBYGCECPSJGAADmT4gAAADphAj0kKkIAMD8CBHoMTECMBjOv1AtQgT6wMUQAODahAgAAJBOiECfmIoAAFydEIE+EiMAAHMTIgBA5XnjB6pHiECfuTgCAFxJiEACMQIAcCkhAknECADAB4QIAACQTohAIlMRAIBzhAgkEyMAveW8CtUkRAAAgHRCBAbAu3cAQNMJERgQMQIANJkQAQAA0gkRGCBTEYClcR6F6hIiMGAuogBAEwkRKAExAgA0jRABAADSCREoCVMRAKBJhAiUiBgBmD/nTKg2IQIAAKQTIlAy3uEDAJpAiEAJiREAoO6ECJSUGAEA6kyIAAAA6YQIlJipCMDcnB+h+oQIlJyLLQBQR0IEAABIJ0SgAkxFAIC6ESJQEWIEAKgTIQIVIkYAnAuhLoQIAACQTohAxXgnEACoAyECFSRGAICqEyIAAEA6IQIVZSoCNJFzH9SHEIEKc0EGAKpKiAAAAOmECFScqQgAUEVCBGpAjAAAVSNEoCbECABQJUIEAKgEb7hAvQgRqBEXaQCgKoQI1IwYAQCqQIgAAADphAjUkKkIAFB2QgRqSowAdeKcBvUjRKDGXLgBgLISIgAAQDohAjVnKgIAlJEQgQYQIwBA2QgRAKDUvJkC9SREoCFcyAGAMhEi0CBiBAAoCyECDSNGAIAyECIAAEA6IQINZCoCAAyaEIGGEiNAFThXQX0JEQAAIJ0QgQbzTiMAMChCBBpOjAAAgyBEADECAKQTIgBAKXmTBOpNiAAR4YIPAOQSIsAFYgQAyCJEAACAdEIEuISpCACQQYgAVxAjwKA5D0H9CREAACCdEAHm5N1IAKCfhAhwVWIEAOgXIQJckxgBAPpBiAAAAOmECHBdpiJAJuccaAYhAsyLGwMAoJeECAAAkE6IAPNmKgIA9IoQARZEjAAAvSBEgAUTI0C/OL9AcwgRAAAgnRABFsW7lgDAUggRYNHECACwWEIEAABIJ0SAJTEVAXrF+QSaRYgAS+bmAQBYKCEC9IQYAQAWQogAAADphAjQM6YiAMB8CRGgp8QIADAfQgQAGDhvYkDzCBGg59xQAADXI0SAvhAjAMC1CBEAACCdEAH6xlQEALgaIQL0lRgBrsd5AppJiAB95yYDALicEAEAANIJESCFqQgAcDEhAqQRIwDAeUIEABgYb1BAcwkRIJWbDgAgQogAAyBGAAAhAgyEGAGAZhMiAABAOiECDIypCAA0lxABBkqMQHP5+w/NJkQAAIB0QgQYOO+KAkDzCBGgFMQINMe3vva6v/NADA96AQDnfetrr8fjT9w96GUASyQygPkQIgDAgggNoBeECFAqpiJQDmID6DchApSOGIH+ExrAoAkRAKgpsQGUmRABSslUBK5PaABVJkSA0hIjIDaA+hIiQKmJEepOaABNJUQAoM/EBsCVhAhQeqYilJ3QAFg4IQJUghhhkIQGQO8JEQAIsQGQTYgAlWEqwlIIDYByESJApYgRrkVsAFSHEAGgMoQGQH0IEaByTEXqTWwANIMQASpJjFSX0AAgQogAFSZGykloADAfQgSABRMbACyVEAEqzVSkP4QGAP0mRIDKEyOLIzYAGCQhAlBTQgOAMhMiQC00dSoiNgCoKiEC1EYdY0RoAFBXQgSolSrGiNgAoImECECfCQ0AuJIQAWoneyoiNABg4YQIUEu9jhGxAQC9JUQAQmgAQDYhAtTW5VMRsQEA5SFEgFoTHwBQTu1BLwAAAGgeIQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQbjoh4ZH1r0OsAAAAa5P8D75CpLfCP/NcAAAAASUVORK5CYII=" alt="Magenta pentagon in window"></p> <h2 id="color-correction"><a href="#color-correction" class="header-anchor">#</a> Color Correction</h2> <p>If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range we get roughly (0.737254902, 0, 0.737254902). This is not the same as we are using for our vertex colors which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.</p> <p>Most monitors use a color space know as sRGB. Our surface is (most likely depending on what is returned from <code>surface.get_preferred_format()</code>) using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than we do lighter colors.</p> <p>You get an approximation of the correct color using the following formula: <code>srgb_color = (rgb_color / 255) ^ 2.2</code>. Doing this with an RGB value of (188, 0, 188) will give us (0.511397819, 0.0, 0.511397819). A little off from our (0.5, 0.0, 0.5). While you could tweak the formula to get the desired values, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial4-buffer/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>A couple things to note:</p> <ol><li>The method name is <code>set_index_buffer</code> not <code>set_index_buffers</code>. You can only have one index buffer set at a time.</li> <li>When using an index buffer, you need to use <code>draw_indexed</code>. The <code>draw</code> method ignores the index buffer. Also make sure you use the number of indices (<code>num_indices</code>), not vertices as your model will either draw wrong, or the method will <code>panic</code> because there are not enough indices.</li></ol> <p>With all that you should have a garishly magenta pentagon in your window.</p> <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyIAAAJzCAYAAADz6Ke4AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AABxWSURBVHic7d1bsF31fdjx397nJkBIQkJHIMkgyR7AiICsCNKY4DQ2DlM3GafutONO7ekDY0/97LzVL50y09u00850PLVbj6e1k/SSJm2atDGBMWFC4hqZYIK5CoRs3c45SEdXdDln79UHIaHLkXQue//2unw+T9LR2Uv/EWit9d2/9d9qrV+/viiKZfGLX/nH8ZmbXojdh2+MtWvXxujoaAAAACzFzMxMTE9Px4svvhg7d+6MTqcTrVYrhouiiBUrRuK+2Tfjzvs/E1945JEYGxsb9HoBAICaOH78eOzcuTOee+65+O53vxvHjh2L4aGhofj85z8fX/3qVyMiYnp6Orrd7oCXCgAA1MXQ0FDcf//9sWPHjoiI+MY3vhHDO3bsiE996lPRarXi2LFjA14iAABQN51OJzqdTpw5cyYeeuih2LlzZwzfe++98cADD8SJEyeiKIpBrxEAAKixu+66K7Zt2xbD4+PjsWLFCtMQAACg74aHh2P16tXRHh0djU6nM+j1AAAADTEyMhLDEeee2fJYFgAAkEWIAAAA6doR4dEsgCrq7o8/+0//Nv7Nf3wqdp/t42v6vaYrdOKdJ78e//Jf/Kv47y+9F94mAxiciYmJ+PGPf3zJP+9RFEW89NJLceDAgSUd20QEoKqKiGJmNmbPdiOKbhRFa1GvKU7vi5f/8mAs37o9Nq+YxzF6vaY5jI61I6IVo2Nt1yeAefje974XERGPPfZYz445PT19IULa7XZs3bo1iqKIl19+OQ4cOBAHDx6MsbGxuOWWWxZ1/OGIiG6360QPUDXtTfFr/+ifx98uZuPY5LvxXnce5/ErXtONE2/8IJ7+88PxsTu3xaab2/lrukIRrdb7AVMUEUVhKgIwT728px8fH48tW7bErl27Yt++fdFqtaLT6VyYhHz4wx+O8fHxOHt2cSPwCxMRAAbtZLz0u/8hntxzU/z85x+PX9nQinf/4jvxn5+bjGL5tvg7X3o07mhPx/O//e3404m18Utf+Hgc+Xf/M16e2RKf+crfinuH344//ve/H29sfDQ+u3FvPPv8rnj3zEis3vIL8elf/flYPxYRs6/E73zt999/zWfj9rf/JP7o2XdittuNH/7Wv44ftm6In/vcP4zHNg/lrSkizk78ZfzJkz+IXYdm46aND8S2NWPRipMX/mSKU/vihWeejRfemoiTnbFYtfGe+IVf/qX46K1nF7a+f/CF+Gtrljj1AWiImZmZeOihh2J4eDhee+212Lt374Vfu+eee2L79u1x6NChRR/fo1kApbE87rp3Qzz9zt6YnDga3fWjMTk5HTEyEkOnpmLqaDc+tGwiDh4qor36nvjo+LJ4oR0RrbEYaxVRxFiMtSNm3v5+/N6em2P9nR+K1T/bHVOv/2k8ecuG+OLD66L9/vecf81sMRzLRiOK02Nx+70fi00rl8XGW1sXXRMS1jS7N577w+/Ha9NFjNyyPlaeeiWee/G9KKIdEUUU3UPxoz/4vXhm79lYtubO2HTDkfjpOz+K//Pue9H+wt9c2PrWRhQd1zugHp566qkr7uGffPLJCz/+9Kc/vaTjF0URU1NTsW3btpiYmIjp6emIiFi9enVs27YtpqamlnR8IQJQGp24YcPmWN3+aRzcdzBO3bcs9u/vxm3bH4zRnS/EgcnTMbNsf+ybibhxyx2xanbmg5cWxYXzeNEdjfv+/m/GF39uNN574dvxxH95JY4cOhxnivFYdvG5vmjH+gf/Rmx/86V45/hN8ZFHfi0+c2crTh89HMfPFmlrGj2wK3Yd7UZrzcPx+Fc/Fx8ZPRY/+OY/jd99oxsRRXQOvBJ/te9MtG/96/Hl3/z1uGPodLzyO/8svv3Cm/Hia0fi7o8sYH2dInQIkOGpp5665q8/+uijfV9DL+7vi6KIZ5999kKEREQcPnw4nnnmmdi6desHj9IugkezAEqke8sdsfnGiOf3H4yJqWWx//QNsfmue2P0zefjpYmpeHdsX7wXI3HvpvHoxr65D9LeEJtWT8f+A91oja2Km1oRx85ttbhMEWeOTceZ4tyPZ08ciqmpKy8o/V7TzKkTcbLbitFNm2Pl4X2xrzsUt25aG+03JiIiYub4kTjabcXIxvWxbHJf7C/asfKO9TH0ozfi0JHpmF3I+rzpBtTIl770pQs//uY3vxkREV/+8pcvfO3tt99e0vGLooif/OQncfDgwYiI2Lp1a3S73Xj11Vcv+dpiY8REBKBEitlbY9OmkXj+1ak4uGc0Drc2xC+uXhVjG4fizyf3x56RQ1G074zNtxWX3lRfNH2I9ki0u50oWhHd2fPf07r0ey685pLffY5Y6f+aon3uAtbqno1TnSLaMRNnO+cvakXE0Psb6Ltn43S3iKHoxOmZcx8j2WoPL359AH10cRDM5a233lry7zHXMXpx3POOHj0ak5OTERFx9913x3333RcR59rhjTfeiMnJydi4cWOsXLlyUcf3qVkAZVK0Yt3mjdH+yUS8s2csYs0DMT4UMbL+tmjt3h27h7vRWrclNgx3o5i96GWXRUXRKaJox0WfNlVc+T3vfxpVq92KKDoxM9ONopjjU7P6vKaRlbfE8lYRx362O/afXR8bhk/Gvp9ORffcQWJ07bpY0341pvbuiQNnN8aGkdOx950D0Wm1Y3zd6mh1Y/7r++Bj8AH6ateuXQP5fXv9qVmf/OQnY8+ePZfsCdm+fXt0u93YtGlTjI6OxunTpxd1/AsTkaU83wVAr3RjdP3mWNvaHQcPnIqxbbfFzUU3Yvz2uPHk83GwiFi5dWMsLyJmr3+weRiLVatvjFZxPH78f/9rTKxox+qPfS5+5cMjaWtqjW+N+9f8v3j20M74g9/aG2vHTsbUodmIeP+6tOZj8chdP4z/8foHvz4xeSLi5m3x8Y/eFNGZTf4zAyif8xOYXgbQ6dOnY/ny5bFjx46YmJi48PXJycl48MEH4+TJk3HixIlFH/9CiAwNDV3vewFI0Fn+odiyIuLgkVas37Amut0iYtXtcXu7iNc7N8SWO26J2W7nyunGHD+//ve0YsPDvxEfP/C/4vmfvRsTcVtsXnHlPyLYzzV1Z9fEL3/xc3Hiv/1x/NXE0Ti78VPx+GOT8Z3v/CiiiOieGYqP/r2vxN998n/H91/cHQdOjsaaux6JX/3so3Fn53CcKBawviX+twEoqzfffLMvxz1+/HgcP378iq+f3yOyFK2vf/3rxSc+8YkYGRm5/ncD0H+tG2N888ZYNVzEqcl34mdHZiKGV8bGzevixlYnju/fHQdOdCNaN8W6LRtiZftEHHxrfxwrLvt5N6J1w3hs+tCqGH5vMnbvPRKzl7+mG9EauTnGb18bN48NRXTOxpGDP4133yvy1hQR7WWrYt26NbF8NGLm5HRMnhiN22+7OU5PvB37jnYihpbFqltvjVXLb4iRdjdmTh2Pw1PvxrEz3YWtD4BSePrpp8+FyMMPPxzLli0b9HoAAIAGePrpp889mjU2NmazOgAAkGY4ore76wEAAK5njs9pBAAA6C8TEQAAIN1wRMQ/+e3vD3odAABAQzyyvuXRLAAAIJ8QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAQAA0gkRAAAgnRABAADSCREAACCdEAEAANIJEQAAIJ0QAaiYx5+4e9BLAIAlGx70AgCYv/MRcnGMfOtrrw9qOQCwaEIEoAKuNQU5/2uCBIAqESIAJTffR7FMSQCoEiECUGKL3Q8iSgAoOyECUFK92pQuSgAoIyECUDL9/FQs+0kAKAshAlAiWR/Na0oCwKAJEYCSGNS/DyJKABgEIQIwYGX6Bwo9ugVAFiECMEBlipCLmZIA0G9CBGBAyhohlxMlAPSDEAEYgKpEyOVECQC9IkQAElU1QOZiPwkASyFEAJLUKUIuZkoCwGIIEYAEdY2Qy4kSAOZLiAD0UVMCZC6iBIBraQ96AQB11eQIudzjT9ztzwOAS5iIAPSBm+65mZIAcJ4QAegxETI/ogSg2YQIQI8IkMUTJQDNY48IQA+IkN6xnwSgGUxEAJbITXN/mJIA1JsQAVgkAZJHlADUj0ezABZBhAyOR7cA6sFEBGCB3ASXgykJQLUJEYAFECHlJEoAqkeIAMyDAKkOUQJQDfaIAFyHCKku+0kAystEBOAa3MTWgykJQPkIEYA5CJD6EiUA5SBEAC4jQppDlAAMjj0iABcRIc1lPwlALhMRgBAgfMCUBCCHEAEaT4RwNaIEoH+ECNBoIoT5EiUAvWWPCNBYIoTFsp8EYOlMRIDGcQNJr5iSACyeEAEaRYTQL6IEYGE8mgU0hgghi0e3AK7PRASoPTeEDIopCcDVCRGg1kQIZSFKAC4lRIDaEiGUlSgBsEcEqCkRQlXYTwI0lYkIUCtu6KgqUxKgaYQIUBsihLoQJUATCBGgFkQIdSVKgLoSIkClCRCa5Pz/74IEqAMhAlSWCKGpTEmAOhAiQCWJEDhHlABVJUSAyhEhMDdRAlSJEAEqQ4DA/NlPApSdEAEqQYTA4piSAGUlRIDSEyHQG6IEKBMhApSWAIH+ESXAoLUHvQCAuYgQyPP4E3f7OwekMxEBSscNEQyGKQmQSYgApSJCoBxECdBvQgQoBQEC5eWjgIF+ECLAwIkQqAZTEqCXhAgwUCIEqkmUAEslRICBECBQH6IEWAwf3wukEyFQXz4KGJgvExEglRsUaAZTEuB6hAiQRoRAM4kSYC5CBOg7AQKcJ0qA8+wRAfpKhABXYz8JNJuJCNA3bjCA+TAlgWYSIkDPCRBgsUQJNIcQAXpKhAC9Ikqg3uwRAXpGhAD9Yj8J1I+JCNATbhCADKYkUB9CBFgSAQIMiiiBavNoFrBoIgQoC49uQfWYiACL4oIPlJEpCVSHEAEWRIAAVSFKoNyECDBvIgSoKlEC5WOPCDAvIgSoC/tJoByECHBdLtgAQK95NAu4KgECAPSLiQgwJxECAPSTEAGuIEIAgH7zaBZwgQABALKYiAARIUKAZvERvjB4QgQQIQBAOiECDSdCAIBBsEcEGkqAAACDZCICDSRCAIBBEyLQMCIEACgDj2ZBQwgQgHN8YhaUg4kINIAIAQDKRohAzYkQAKCMhAjUmAgBAMrKHhGoIQECAJSdiQjUjAgBuDob1aE8hAjUiAgBAKrCo1lQAwIEAKgaExGoOBECAFSREIEKEyEAQFUJEagoEQKwMDaqQ7nYIwIVI0AAgDowEYEKESEAQF0IEagIEQIA1IlHs6DkBAgAUEcmIlBiIgQAqCshAiUlQgB6xydmQfkIESghEQIA1J09IlAiAgQAaAoTESgJEQIANIkQgRIQIQBA03g0CwZIgAD0n43qUE4mIjAgIgQAaDIhAgMgQgCApvNoFiQSIAAA55iIQBIRAgDwASECCUQIwGDYqA7lJUSgz0QIAMCV7BGBPhEgAABXZyICfSBCAACuTYhAj4kQAIDr82gW9IgAAQCYPxMR6AERAlA+PjELyk2IwBKJEACAhRMisAQiBABgcewRgUUQIAAAS2MiAgskQgAAlk6IwAKIEIBqsFEdyk+IwDyJEACA3hEiME/eXQMA6B0hAgsgRgAAekOIAAAA6YQILJCpCEC5OU9DNQgRWAQXOQCApREiAABAOiECi2QqAgCweEIElkCMAAAsjhCBJRIjAAALJ0QAgNrw5hBUhxCBHnDhAwBYGCECPSJGAADmT4gAAADphAj0kKkIAMD8CBHoMTECMBjOv1AtQgT6wMUQAODahAgAAJBOiECfmIoAAFydEIE+EiMAAHMTIgBA5XnjB6pHiECfuTgCAFxJiEACMQIAcCkhAknECADAB4QIAACQTohAIlMRAIBzhAgkEyMAveW8CtUkRAAAgHRCBAbAu3cAQNMJERgQMQIANJkQAQAA0gkRGCBTEYClcR6F6hIiMGAuogBAEwkRKAExAgA0jRABAADSCREoCVMRAKBJhAiUiBgBmD/nTKg2IQIAAKQTIlAy3uEDAJpAiEAJiREAoO6ECJSUGAEA6kyIAAAA6YQIlJipCMDcnB+h+oQIlJyLLQBQR0IEAABIJ0SgAkxFAIC6ESJQEWIEAKgTIQIVIkYAnAuhLoQIAACQTohAxXgnEACoAyECFSRGAICqEyIAAEA6IQIVZSoCNJFzH9SHEIEKc0EGAKpKiAAAAOmECFScqQgAUEVCBGpAjAAAVSNEoCbECABQJUIEAKgEb7hAvQgRqBEXaQCgKoQI1IwYAQCqQIgAAADphAjUkKkIAFB2QgRqSowAdeKcBvUjRKDGXLgBgLISIgAAQDohAjVnKgIAlJEQgQYQIwBA2QgRAKDUvJkC9SREoCFcyAGAMhEi0CBiBAAoCyECDSNGAIAyECIAAEA6IQINZCoCAAyaEIGGEiNAFThXQX0JEQAAIJ0QgQbzTiMAMChCBBpOjAAAgyBEADECAKQTIgBAKXmTBOpNiAAR4YIPAOQSIsAFYgQAyCJEAACAdEIEuISpCACQQYgAVxAjwKA5D0H9CREAACCdEAHm5N1IAKCfhAhwVWIEAOgXIQJckxgBAPpBiAAAAOmECHBdpiJAJuccaAYhAsyLGwMAoJeECAAAkE6IAPNmKgIA9IoQARZEjAAAvSBEgAUTI0C/OL9AcwgRAAAgnRABFsW7lgDAUggRYNHECACwWEIEAABIJ0SAJTEVAXrF+QSaRYgAS+bmAQBYKCEC9IQYAQAWQogAAADphAjQM6YiAMB8CRGgp8QIADAfQgQAGDhvYkDzCBGg59xQAADXI0SAvhAjAMC1CBEAACCdEAH6xlQEALgaIQL0lRgBrsd5AppJiAB95yYDALicEAEAANIJESCFqQgAcDEhAqQRIwDAeUIEABgYb1BAcwkRIJWbDgAgQogAAyBGAAAhAgyEGAGAZhMiAABAOiECDIypCAA0lxABBkqMQHP5+w/NJkQAAIB0QgQYOO+KAkDzCBGgFMQINMe3vva6v/NADA96AQDnfetrr8fjT9w96GUASyQygPkQIgDAgggNoBeECFAqpiJQDmID6DchApSOGIH+ExrAoAkRAKgpsQGUmRABSslUBK5PaABVJkSA0hIjIDaA+hIiQKmJEepOaABNJUQAoM/EBsCVhAhQeqYilJ3QAFg4IQJUghhhkIQGQO8JEQAIsQGQTYgAlWEqwlIIDYByESJApYgRrkVsAFSHEAGgMoQGQH0IEaByTEXqTWwANIMQASpJjFSX0AAgQogAFSZGykloADAfQgSABRMbACyVEAEqzVSkP4QGAP0mRIDKEyOLIzYAGCQhAlBTQgOAMhMiQC00dSoiNgCoKiEC1EYdY0RoAFBXQgSolSrGiNgAoImECECfCQ0AuJIQAWoneyoiNABg4YQIUEu9jhGxAQC9JUQAQmgAQDYhAtTW5VMRsQEA5SFEgFoTHwBQTu1BLwAAAGgeIQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQbjoh4ZH1r0OsAAAAa5P8D75CpLfCP/NcAAAAASUVORK5CYII=" alt="Magenta pentagon in window"></p> <h2 id="color-correction"><a href="#color-correction" class="header-anchor">#</a> Color Correction</h2> <p>If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range we get roughly (0.737254902, 0, 0.737254902). This is not the same as we are using for our vertex colors which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.</p> <p>Most monitors use a color space know as sRGB. Our surface is (most likely depending on what is returned from <code>surface.get_preferred_format()</code>) using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than we do lighter colors.</p> <p>You get an approximation of the correct color using the following formula: <code>srgb_color = (rgb_color / 255) ^ 2.2</code>. Doing this with an RGB value of (188, 0, 188) will give us (0.511397819, 0.0, 0.511397819). A little off from our (0.5, 0.0, 0.5). While you could tweak the formula to get the desired values, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial4-buffer/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="prev">
           The Pipeline
@@ -256,6 +256,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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/8.b80b1345.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/8.b80b1345.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html
index 008ed8d5..373b7cd8 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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/7.9e1be960.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/7.9e1be960.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -397,7 +397,7 @@ fn fs_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>
-</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">12/29/2021, 6:33:55 PM</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">12/29/2021, 6:57:29 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
@@ -406,6 +406,6 @@ fn fs_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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/7.9e1be960.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/7.9e1be960.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html
index 4fb4da0e..d151ca39 100644
--- a/beginner/tutorial6-uniforms/index.html
+++ b/beginner/tutorial6-uniforms/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/18.b3e867e8.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/18.b3e867e8.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -318,7 +318,7 @@ fn vs_main(
     <span class="token keyword">self</span><span class="token punctuation">.</span>camera_uniform<span class="token punctuation">.</span><span class="token function">update_view_proj</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>camera<span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword">self</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">write_buffer</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>camera_buffer<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token namespace">bytemuck<span class="token punctuation">::</span></span><span class="token function">cast_slice</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token punctuation">[</span><span class="token keyword">self</span><span class="token punctuation">.</span>camera_uniform<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>That's all we need to do. If you run the code now you should see a pentagon with our tree texture that you can rotate around and zoom into with the wasd/arrow keys.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Have our model rotate on it's own independently of the the camera. <em>Hint: you'll need another matrix for this.</em></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial6-uniforms/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>That's all we need to do. If you run the code now you should see a pentagon with our tree texture that you can rotate around and zoom into with the wasd/arrow keys.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Have our model rotate on it's own independently of the the camera. <em>Hint: you'll need another matrix for this.</em></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial6-uniforms/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial5-textures/" class="prev">
           Textures and bind groups
@@ -327,6 +327,6 @@ fn vs_main(
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/18.b3e867e8.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/18.b3e867e8.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html
index ae407c60..a89549a0 100644
--- a/beginner/tutorial7-instancing/index.html
+++ b/beginner/tutorial7-instancing/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/19.3043ebc3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/19.3043ebc3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -173,7 +173,7 @@ fn vs_main(
     out.clip_position = camera.view_proj * model_matrix * vec4&lt;f32&gt;(model.position, 1.0);
     return out;
 }
-</code></pre></div><p>With all that done, we should have a forest of trees!</p> <p><img src="/learn-wgpu/assets/img/forest.5c5cf3ad.png" alt="./forest.png"></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Modify the position and/or rotation of the instances every frame.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial7-instancing/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>With all that done, we should have a forest of trees!</p> <p><img src="/learn-wgpu/assets/img/forest.5c5cf3ad.png" alt="./forest.png"></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Modify the position and/or rotation of the instances every frame.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial7-instancing/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="prev">
           Uniform buffers and a 3d camera
@@ -182,6 +182,6 @@ fn vs_main(
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/19.3043ebc3.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/19.3043ebc3.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html
index af924788..1ffa99c1 100644
--- a/beginner/tutorial8-depth/index.html
+++ b/beginner/tutorial8-depth/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/16.8b83d0ae.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/16.8b83d0ae.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -100,7 +100,7 @@
         stencil_ops<span class="token punctuation">:</span> <span class="token class-name">None</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 punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>And that's all we have to do! No shader code needed! If you run the application, the depth issues will be fixed.</p> <p><img src="/learn-wgpu/assets/img/forest_fixed.a77f70f6.png" alt="forest_fixed.png"></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Since the depth buffer is a texture, we can sample it in the shader. Because it's a depth texture, we'll have to use the <code>samplerShadow</code> uniform type and the <code>sampler2DShadow</code> function instead of <code>sampler</code>, and <code>sampler2D</code> respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial8-depth/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>And that's all we have to do! No shader code needed! If you run the application, the depth issues will be fixed.</p> <p><img src="/learn-wgpu/assets/img/forest_fixed.a77f70f6.png" alt="forest_fixed.png"></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Since the depth buffer is a texture, we can sample it in the shader. Because it's a depth texture, we'll have to use the <code>samplerShadow</code> uniform type and the <code>sampler2DShadow</code> function instead of <code>sampler</code>, and <code>sampler2D</code> respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial8-depth/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial7-instancing/" class="prev">
           Instancing
@@ -109,6 +109,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/16.8b83d0ae.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/16.8b83d0ae.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html
index 2584349c..7447a2de 100644
--- a/beginner/tutorial9-models/index.html
+++ b/beginner/tutorial9-models/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/11.918ac8f8.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/11.918ac8f8.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -355,7 +355,7 @@ render_pass<span class="token punctuation">.</span><span class="token function">
 </code></pre></div><p>The code in <code>main.rs</code> will change accordingly.</p> <div class="language-rust extra-class"><pre class="language-rust"><code>render_pass<span class="token punctuation">.</span><span class="token function">set_vertex_buffer</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">self</span><span class="token punctuation">.</span>instance_buffer<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">..</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 render_pass<span class="token punctuation">.</span><span class="token function">set_pipeline</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>render_pipeline<span class="token punctuation">)</span><span class="token punctuation">;</span>
 render_pass<span class="token punctuation">.</span><span class="token function">draw_model_instanced</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>obj_model<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">..</span><span class="token keyword">self</span><span class="token punctuation">.</span>instances<span class="token punctuation">.</span><span class="token function">len</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token keyword">u32</span><span class="token punctuation">,</span> <span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>camera_bind_group<span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial9-models/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial9-models/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial8-depth/" class="prev">
           The Depth Buffer
@@ -364,6 +364,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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/11.918ac8f8.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/11.918ac8f8.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 18f4bb16..8d5450f2 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,16 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2021-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/27.f1adef47.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/27.f1adef47.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.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-exact-active 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="active sidebar-link">Introduction</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/#what-is-wgpu" class="sidebar-link">What is wgpu?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#why-rust" class="sidebar-link">Why Rust?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#contribution-and-support" class="sidebar-link">Contribution and Support</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#special-thanks-to-these-patrons" class="sidebar-link">Special thanks to these patrons!</a></li></ul></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-surface/" class="sidebar-link">The Surface</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><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h1> <h2 id="what-is-wgpu"><a href="#what-is-wgpu" class="header-anchor">#</a> What is wgpu?</h2> <p><a href="https://github.com/gfx-rs/wgpu" target="_blank" rel="noopener noreferrer">Wgpu<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></a> is a Rust implementation of the <a href="https://gpuweb.github.io/gpuweb/" target="_blank" rel="noopener noreferrer">WebGPU API spec<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></a>. WebGPU is a specification published by the GPU for the Web Community Group. It aims to allow web code access to GPU functions in a safe and reliable manner. It does this by mimicking the Vulkan API, and translating that down to whatever API the host hardware is using (ie. DirectX, Metal, Vulkan).</p> <p>Wgpu is still in development, so some of this doc is subject to change.</p> <h2 id="why-rust"><a href="#why-rust" class="header-anchor">#</a> Why Rust?</h2> <p>Wgpu actually has C bindings to allow you to write C/C++ code with it, as well as use other languages that interface with C. That being said, wgpu is written in Rust, and it has some convenient Rust bindings that don't have to jump through any hoops. On top of that, I've been enjoying writing in Rust.</p> <p>You should be fairly familiar with Rust before using this tutorial as I won't go into much detail on Rust syntax. If you're not super comfortable with Rust you can review the <a href="https://www.rust-lang.org/learn" target="_blank" rel="noopener noreferrer">Rust tutorial<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></a>. You should also be familiar with <a href="https://doc.rust-lang.org/cargo/" target="_blank" rel="noopener noreferrer">Cargo<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></a>.</p> <p>I'm using this project to learn wgpu myself, so I might miss some important details, or explain things badly. I'm always open to constructive feedback.</p> <h2 id="contribution-and-support"><a href="#contribution-and-support" class="header-anchor">#</a> Contribution and Support</h2> <ul><li>I accept pull requests (<a href="https://github.com/sotrh/learn-wgpu" target="_blank" rel="noopener noreferrer">GitHub repo<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></a>) for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.</li> <li>Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.</li> <li>If you want to support me directly, check out my <a href="https://www.patreon.com/sotrh" target="_blank" rel="noopener noreferrer">patreon<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></a>!</li></ul> <h2 id="special-thanks-to-these-patrons"><a href="#special-thanks-to-these-patrons" class="header-anchor">#</a> Special thanks to these patrons!</h2> <p><em>In no particular order</em></p> <ul><li>Jan Šipr</li> <li>Danny McGee</li> <li>Bernard Llanos</li> <li>Ken Kochis</li> <li>Aron Granberg</li> <li>Ben Anderson</li> <li>Ian Gowen</li> <li>Paul E Hansen</li> <li>Lennart</li> <li>Gunstein Vatnar</li> <li>David Laban</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/learn-wgpu/beginner/tutorial1-window/">
+    <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-exact-active 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="active sidebar-link">Introduction</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/#what-is-wgpu" class="sidebar-link">What is wgpu?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#why-rust" class="sidebar-link">Why Rust?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#contribution-and-support" class="sidebar-link">Contribution and Support</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#special-thanks-to-these-patrons" class="sidebar-link">Special thanks to these patrons!</a></li></ul></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-surface/" class="sidebar-link">The Surface</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><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h1> <h2 id="what-is-wgpu"><a href="#what-is-wgpu" class="header-anchor">#</a> What is wgpu?</h2> <p><a href="https://github.com/gfx-rs/wgpu" target="_blank" rel="noopener noreferrer">Wgpu<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></a> is a Rust implementation of the <a href="https://gpuweb.github.io/gpuweb/" target="_blank" rel="noopener noreferrer">WebGPU API spec<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></a>. WebGPU is a specification published by the GPU for the Web Community Group. It aims to allow web code access to GPU functions in a safe and reliable manner. It does this by mimicking the Vulkan API, and translating that down to whatever API the host hardware is using (ie. DirectX, Metal, Vulkan).</p> <p>Wgpu is still in development, so some of this doc is subject to change.</p> <h2 id="why-rust"><a href="#why-rust" class="header-anchor">#</a> Why Rust?</h2> <p>Wgpu actually has C bindings to allow you to write C/C++ code with it, as well as use other languages that interface with C. That being said, wgpu is written in Rust, and it has some convenient Rust bindings that don't have to jump through any hoops. On top of that, I've been enjoying writing in Rust.</p> <p>You should be fairly familiar with Rust before using this tutorial as I won't go into much detail on Rust syntax. If you're not super comfortable with Rust you can review the <a href="https://www.rust-lang.org/learn" target="_blank" rel="noopener noreferrer">Rust tutorial<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></a>. You should also be familiar with <a href="https://doc.rust-lang.org/cargo/" target="_blank" rel="noopener noreferrer">Cargo<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></a>.</p> <p>I'm using this project to learn wgpu myself, so I might miss some important details, or explain things badly. I'm always open to constructive feedback.</p> <h2 id="contribution-and-support"><a href="#contribution-and-support" class="header-anchor">#</a> Contribution and Support</h2> <ul><li>I accept pull requests (<a href="https://github.com/sotrh/learn-wgpu" target="_blank" rel="noopener noreferrer">GitHub repo<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></a>) for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.</li> <li>Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.</li> <li>If you want to support me directly, check out my <a href="https://www.patreon.com/sotrh" target="_blank" rel="noopener noreferrer">patreon<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></a>!</li></ul> <h2 id="special-thanks-to-these-patrons"><a href="#special-thanks-to-these-patrons" class="header-anchor">#</a> Special thanks to these patrons!</h2> <p><em>In no particular order</em></p> <ul><li>Jan Šipr</li> <li>Danny McGee</li> <li>Bernard Llanos</li> <li>Ken Kochis</li> <li>Aron Granberg</li> <li>Ben Anderson</li> <li>Ian Gowen</li> <li>Paul E Hansen</li> <li>Lennart</li> <li>Gunstein Vatnar</li> <li>David Laban</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/learn-wgpu/beginner/tutorial1-window/">
           Dependencies and the window
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/27.f1adef47.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/27.f1adef47.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/pbr-notes.html b/intermediate/pbr-notes.html
index 07535f55..1476fc38 100644
--- a/intermediate/pbr-notes.html
+++ b/intermediate/pbr-notes.html
@@ -7,12 +7,12 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2021-12-29T18:33:55.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Sources"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/pbr-notes.html"><meta name="twitter:title" content="Sources"><meta name="twitter:url" content="/intermediate/pbr-notes.html"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/29.c45319b3.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Sources"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/pbr-notes.html"><meta name="twitter:title" content="Sources"><meta name="twitter:url" content="/intermediate/pbr-notes.html"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/29.c45319b3.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.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-surface/" class="sidebar-link">The Surface</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><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="sources"><a href="#sources" class="header-anchor">#</a> Sources</h1> <ul><li>https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading</li> <li>http://jimmiejohnsson84.me/pages/rendering_pbr.html</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:33:55 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/29.c45319b3.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-surface/" class="sidebar-link">The Surface</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><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="sources"><a href="#sources" class="header-anchor">#</a> Sources</h1> <ul><li>https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading</li> <li>http://jimmiejohnsson84.me/pages/rendering_pbr.html</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:57:29 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/29.c45319b3.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html
index 20340b56..480ea15e 100644
--- a/intermediate/tutorial10-lighting/index.html
+++ b/intermediate/tutorial10-lighting/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.fa165590.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.fa165590.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -627,7 +627,7 @@ let specular_color = specular_strength * light.color;
 let half_dir = normalize(view_dir + light_dir);
 
 let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
-</code></pre></div><p>It's hard to tell the difference, but here's the results.</p> <p><img src="/learn-wgpu/assets/img/half_dir.bbcc23b8.png" alt="./half_dir.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial10-lighting/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>It's hard to tell the difference, but here's the results.</p> <p><img src="/learn-wgpu/assets/img/half_dir.bbcc23b8.png" alt="./half_dir.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial10-lighting/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial9-models/" class="prev">
           Model Loading
@@ -636,6 +636,6 @@ let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/5.fa165590.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/5.fa165590.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html
index c39fa572..4751b618 100644
--- a/intermediate/tutorial11-normals/index.html
+++ b/intermediate/tutorial11-normals/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/6.5bff8dca.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/6.5bff8dca.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -477,7 +477,7 @@ render_pass<span class="token punctuation">.</span><span class="token function">
     <span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>camera_bind_group<span class="token punctuation">,</span>
     <span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>light_bind_group<span class="token punctuation">,</span>
 <span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>That gives us something like this.</p> <p><img src="/learn-wgpu/assets/img/debug_material.b374492b.png" alt=""></p> <p>You can find the textures I use in the Github Repository.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial11-normals/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>That gives us something like this.</p> <p><img src="/learn-wgpu/assets/img/debug_material.b374492b.png" alt=""></p> <p>You can find the textures I use in the Github Repository.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial11-normals/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="prev">
           Working with Lights
@@ -486,6 +486,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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/6.5bff8dca.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/6.5bff8dca.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html
index b57f1bf1..95c166ac 100644
--- a/intermediate/tutorial12-camera/index.html
+++ b/intermediate/tutorial12-camera/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.19aa8b8d.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.57f53ce3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -357,7 +357,7 @@
         <span class="token keyword">match</span> event <span class="token punctuation">{</span>
             <span class="token comment">// ...</span>
             <span class="token comment">// UPDATED!</span>
-            <span class="token class-name">Event</span><span class="token punctuation">::</span><span class="token class-name">RedrawRequested</span><span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+            <span class="token class-name">Event</span><span class="token punctuation">::</span><span class="token class-name">RedrawRequested</span><span class="token punctuation">(</span>window_id<span class="token punctuation">)</span> <span class="token keyword">if</span> window_id <span class="token operator">==</span> window<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                 <span class="token keyword">let</span> now <span class="token operator">=</span> <span class="token namespace">std<span class="token punctuation">::</span>time<span class="token punctuation">::</span></span><span class="token class-name">Instant</span><span class="token punctuation">::</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                 <span class="token keyword">let</span> dt <span class="token operator">=</span> now <span class="token operator">-</span> last_render_time<span class="token punctuation">;</span>
                 last_render_time <span class="token operator">=</span> now<span class="token punctuation">;</span>
@@ -368,7 +368,7 @@
         <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>With that we should be able to move our camera wherever we want.</p> <p><img src="/learn-wgpu/assets/img/screenshot.4f5740bc.png" alt="./screenshot.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial12-camera/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>With that we should be able to move our camera wherever we want.</p> <p><img src="/learn-wgpu/assets/img/screenshot.4f5740bc.png" alt="./screenshot.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial12-camera/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/intermediate/tutorial11-normals/" class="prev">
           Normal Mapping
@@ -377,6 +377,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/17.19aa8b8d.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/17.57f53ce3.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial13-threading/index.html b/intermediate/tutorial13-threading/index.html
index a4134333..abbd2e98 100644
--- a/intermediate/tutorial13-threading/index.html
+++ b/intermediate/tutorial13-threading/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/30.51e45a26.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/30.51e45a26.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -99,7 +99,7 @@
 <span class="token punctuation">}</span>
 </code></pre></div><p>We've parallelized loading the meshes, and making the vertex array for them. Propably a bit overkill, but <code>rayon</code> should prevent us from using too many threads.</p> <div class="note"><p>You'll notice that we didn't use <code>rayon</code> for calculating the tangent, and bitangent. I tried to get it to work, but I was having trouble finding a way to do it without multiple mutable references to <code>vertices</code>. I don't feel like introducing a <code>std::sync::Mutex</code>, so I'll leave it for now.</p> <p>This is honestly a better job for a compute shader, as the model data is going to get loaded into a buffer anyway.</p></div> <h2 id="it-s-that-easy"><a href="#it-s-that-easy" class="header-anchor">#</a> It's that easy!</h2> <p>Most of the <code>wgpu</code> types are <code>Send + Sync</code>, so we can use them in threads without much trouble. It was so easy, that I feel like this tutorial is too short! I'll just leave off with a speed comparison between the previous model loading code and the current code.</p> <div class="language- extra-class"><pre class="language-text"><code>Elapsed (Original): 309.596382ms
 Elapsed (Threaded): 199.645027ms
-</code></pre></div><p>We're not loading that many resources, so the speed up is minimal. We'll be doing more stuff with threading, but this is a good introduction.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial13-threading/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>We're not loading that many resources, so the speed up is minimal. We'll be doing more stuff with threading, but this is a good introduction.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial13-threading/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/intermediate/tutorial12-camera/" class="prev">
           A Better Camera
@@ -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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/30.51e45a26.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/30.51e45a26.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/news/0.12/index.html b/news/0.12/index.html
index 9ec4ff16..671ee2bd 100644
--- a/news/0.12/index.html
+++ b/news/0.12/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-12-29T18:33:55.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Update to 0.12!"><meta property="og:type" content="website"><meta property="og:url" content="/news/0.12/"><meta name="twitter:title" content="Update to 0.12!"><meta name="twitter:url" content="/news/0.12/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/31.8816c903.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Update to 0.12!"><meta property="og:type" content="website"><meta property="og:url" content="/news/0.12/"><meta name="twitter:title" content="Update to 0.12!"><meta name="twitter:url" content="/news/0.12/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/31.8816c903.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -49,7 +49,7 @@ this change.</p> <h2 id="misc"><a href="#misc" class="header-anchor">#</a> Misc<
 breaks glob imports (aka. <code>use anyhow::*</code>), I had to switch qualified
 imports and uses (ie. <code>anyhow::Result</code>). This was mostly an issue on my
 build scripts for some of showcase examples.</p> <p>The main tutorial examples weren't affected, and the changes are minor, so
-if your curious feel free to look at the repo.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+if your curious feel free to look at the repo.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/showcase/alignment/" class="prev">
           Memory Layout in WGSL
@@ -58,6 +58,6 @@ if your curious feel free to look at the repo.</p></div> <footer class="page-edi
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/31.8816c903.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/31.8816c903.js" defer></script>
   </body>
 </html>
diff --git a/news/pre-0.12/index.html b/news/pre-0.12/index.html
index bfb7e25b..28742363 100644
--- a/news/pre-0.12/index.html
+++ b/news/pre-0.12/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-12-29T18:33:55.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="News (Pre 0.12)"><meta property="og:type" content="website"><meta property="og:url" content="/news/pre-0.12/"><meta name="twitter:title" content="News (Pre 0.12)"><meta name="twitter:url" content="/news/pre-0.12/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/20.140d2648.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/12.7e1fa0ed.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="News (Pre 0.12)"><meta property="og:type" content="website"><meta property="og:url" content="/news/pre-0.12/"><meta name="twitter:title" content="News (Pre 0.12)"><meta name="twitter:url" content="/news/pre-0.12/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/20.140d2648.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/12.7e1fa0ed.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -43,11 +43,11 @@ surface<span class="token punctuation">.</span><span class="token function">conf
 </code></pre></div><ol start="2"><li>The <code>request_device</code> method now returns a <code>(Device, Queue)</code> tuple. This means that you can borrow the <code>Queue</code> mutably while using the <code>Device</code> immutably. Because of this change, submitting <code>CommandBuffer</code>s to the queue uses the <code>submit</code> method on the <code>Queue</code> directly.</li></ol> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">self</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token punctuation">[</span>
     encoder<span class="token punctuation">.</span><span class="token function">finish</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><ol start="3"><li>The <code>create</code> method on <code>Surface</code> takes in any struct that implements the <code>HasRawWindow</code> trait, instead of a <code>RawWindowHandle</code>. This means that the <code>raw-window-handle = &quot;0.3&quot;</code> line in <code>Cargo.toml</code> is no longer needed.</li></ol> <p>I don't know if this is a change from 0.4, but you use <code>wgpu = &quot;0.4&quot;</code> line in dependencies instead of the <code>[dependencies.wgpu]</code> as wgpu will determine the best back end for you.</p> <h2 id="new-recent-articles"><a href="#new-recent-articles" class="header-anchor">#</a> New/Recent Articles</h2> <div><ul><li><a></a></li><li><a></a></li><li><a></a></li><li><a></a></li><li><a></a></li></ul></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><ol start="3"><li>The <code>create</code> method on <code>Surface</code> takes in any struct that implements the <code>HasRawWindow</code> trait, instead of a <code>RawWindowHandle</code>. This means that the <code>raw-window-handle = &quot;0.3&quot;</code> line in <code>Cargo.toml</code> is no longer needed.</li></ol> <p>I don't know if this is a change from 0.4, but you use <code>wgpu = &quot;0.4&quot;</code> line in dependencies instead of the <code>[dependencies.wgpu]</code> as wgpu will determine the best back end for you.</p> <h2 id="new-recent-articles"><a href="#new-recent-articles" class="header-anchor">#</a> New/Recent Articles</h2> <div><ul><li><a></a></li><li><a></a></li><li><a></a></li><li><a></a></li><li><a></a></li></ul></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/news/0.12/" class="prev">
           Update to 0.12!
         </a></span> <!----></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/20.140d2648.js" defer></script><script src="/learn-wgpu/assets/js/12.7e1fa0ed.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/20.140d2648.js" defer></script><script src="/learn-wgpu/assets/js/12.7e1fa0ed.js" defer></script>
   </body>
 </html>
diff --git a/showcase/alignment/index.html b/showcase/alignment/index.html
index 21920547..e92d47b2 100644
--- a/showcase/alignment/index.html
+++ b/showcase/alignment/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-12-29T18:33:55.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Memory Layout in WGSL"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/alignment/"><meta name="twitter:title" content="Memory Layout in WGSL"><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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/33.4daba1cc.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Memory Layout in WGSL"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/alignment/"><meta name="twitter:title" content="Memory Layout in WGSL"><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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/33.4daba1cc.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -55,7 +55,7 @@ has been initialized properly. This gave be an error when I tried it:</p> <div c
     |
     = note: source type: `LightUniform` (256 bits)
     = note: target type: `_::{closure#0}::TypeWithoutPadding` (192 bits)
-</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/showcase/compute/" class="prev">
           Compute Example: Tangents and Bitangents
@@ -64,6 +64,6 @@ has been initialized properly. This gave be an error when I tried it:</p> <div c
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/33.4daba1cc.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/33.4daba1cc.js" defer></script>
   </body>
 </html>
diff --git a/showcase/compute/index.html b/showcase/compute/index.html
index fa6959b1..d0441a08 100644
--- a/showcase/compute/index.html
+++ b/showcase/compute/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/9.37f85b77.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/9.37f85b77.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -113,7 +113,7 @@
     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     flat_triangle_map<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>t_list<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
-</code></pre></div><p>I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster that the simple method.</p> <h2 id="results"><a href="#results" class="header-anchor">#</a> Results</h2> <p>The tangents and bitangents are now getting calculated correctly and on the GPU!</p> <p><img src="/learn-wgpu/assets/img/results.7918efc1.png" alt="./results.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/compute/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster that the simple method.</p> <h2 id="results"><a href="#results" class="header-anchor">#</a> Results</h2> <p>The tangents and bitangents are now getting calculated correctly and on the GPU!</p> <p><img src="/learn-wgpu/assets/img/results.7918efc1.png" alt="./results.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/compute/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/showcase/pong/" class="prev">
           Pong
@@ -122,6 +122,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/9.37f85b77.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/9.37f85b77.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html
index 157c5c1c..49d39b0b 100644
--- a/showcase/gifs/index.html
+++ b/showcase/gifs/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/21.178de04f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/21.178de04f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -140,7 +140,7 @@
 
 <span class="token punctuation">}</span>
 </code></pre></div><p>Once that's done we can pass our frames into <code>save_gif()</code>.</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token function">save_gif</span><span class="token punctuation">(</span><span class="token string">&quot;output.gif&quot;</span><span class="token punctuation">,</span> <span class="token operator">&amp;</span><span class="token keyword">mut</span> frames<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> texture_size <span class="token keyword">as</span> <span class="token keyword">u16</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">unwrap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>That's the gist of it. We can improve things using a texture array, and sending the draw commands all at once, but this gets the idea across. With the shader I wrote we get the following GIF.</p> <p><img src="/learn-wgpu/assets/img/output.5ed23d6e.gif" alt="./output.gif"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/gifs/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>That's the gist of it. We can improve things using a texture array, and sending the draw commands all at once, but this gets the idea across. With the shader I wrote we get the following GIF.</p> <p><img src="/learn-wgpu/assets/img/output.5ed23d6e.gif" alt="./output.gif"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/gifs/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/showcase/windowless/" class="prev">
           Wgpu without a window
@@ -149,6 +149,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/21.178de04f.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/21.178de04f.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/showcase/imgui-demo/index.html b/showcase/imgui-demo/index.html
index 69f256d6..b48ebd55 100644
--- a/showcase/imgui-demo/index.html
+++ b/showcase/imgui-demo/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.d1c5beb9.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.d1c5beb9.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -106,7 +106,7 @@ imgui<span class="token punctuation">.</span><span class="token function">fonts<
 <span class="token function">drop</span><span class="token punctuation">(</span>pass<span class="token punctuation">)</span><span class="token punctuation">;</span>
 
 display<span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token class-name">Some</span><span class="token punctuation">(</span>encoder<span class="token punctuation">.</span><span class="token function">finish</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>That's all there is to it. Here's a picture of the results!</p> <p><img src="/learn-wgpu/assets/img/screenshot.1f9dab62.png" alt="./screenshot.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/imgui-demo/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/22.d1c5beb9.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+</code></pre></div><p>That's all there is to it. Here's a picture of the results!</p> <p><img src="/learn-wgpu/assets/img/screenshot.1f9dab62.png" alt="./screenshot.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/imgui-demo/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/22.d1c5beb9.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index 5ac6b670..a3bc4e47 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="2021-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/32.cc41f1b1.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/32.cc41f1b1.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.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-surface/" class="sidebar-link">The Surface</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 WGSL</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></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">12/29/2021, 6:33:55 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-surface/" class="sidebar-link">The Surface</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 WGSL</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></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">12/29/2021, 6:57:29 PM</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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/32.cc41f1b1.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/32.cc41f1b1.js" defer></script>
   </body>
 </html>
diff --git a/showcase/pong/index.html b/showcase/pong/index.html
index 253caa68..280fd82f 100644
--- a/showcase/pong/index.html
+++ b/showcase/pong/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/23.ffb83767.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/10.9b2446b9.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/23.ffb83767.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/10.9b2446b9.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -276,7 +276,7 @@
         <span class="token punctuation">}</span><span class="token punctuation">)</span>
         <span class="token punctuation">.</span><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">&quot;Couldn't append canvas to document body.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
-</code></pre></div><p>Everything else works the same.</p> <h2 id="summary"><a href="#summary" class="header-anchor">#</a> Summary</h2> <p>A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience none the less.</p> <p>Try the code down below! (Controls currently require a keyboard.)</p> <div id="wasm-example"><!----> <button>Try Pong!</button></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>Everything else works the same.</p> <h2 id="summary"><a href="#summary" class="header-anchor">#</a> Summary</h2> <p>A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience none the less.</p> <p>Try the code down below! (Controls currently require a keyboard.)</p> <div id="wasm-example"><!----> <button>Try Pong!</button></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/showcase/gifs/" class="prev">
           Creating gifs
@@ -285,6 +285,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/23.ffb83767.js" defer></script><script src="/learn-wgpu/assets/js/10.9b2446b9.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/23.ffb83767.js" defer></script><script src="/learn-wgpu/assets/js/10.9b2446b9.js" defer></script>
   </body>
 </html>
diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html
index 781a5f2d..7a410e0a 100644
--- a/showcase/windowless/index.html
+++ b/showcase/windowless/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-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/24.6a0d1e12.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/24.6a0d1e12.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5a7a1f31.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.d664ca20.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css">
   </head>
   <body>
@@ -220,7 +220,7 @@ output_buffer<span class="token punctuation">.</span><span class="token function
 <span class="token keyword">fn</span> <span class="token function-definition function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token namespace">pollster<span class="token punctuation">::</span></span><span class="token function">block_on</span><span class="token punctuation">(</span><span class="token function">run</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>With all that you should have an image like this.</p> <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFq0lEQVR4nO3U2XVcRxBEQcovOiJf5IY8kl8SRLAPAXAweEvvGfFRFlTeP/786+9/vwGRBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEINj3b/+83G8v9/vLJZEABBMABCBUGX8hApkEIJQA8D8BCPRx/IUI5BGAQAJAIQBhPht/IQJZBCCMAPCWAAT5avyFCOQQgCACwEcCEOLo+AsRyCAAIQSARwQgwNnxFyKwPwEIIAB8RgA2d3X8hQjsTQA2JwA8IwAbuzv+QgT2JQAbEwC+IgCbqjX+QgT2JACbEgCOEIAN1R5/IQL7EYANCQBHCcBmWo2/EIG9CMBmBIAzBGAjrcdfiMA+BGAjAsBZArCJXuMvRGAPArAJAeAKAdhA7/EXIrA+AdiAAHCVACxu1PgLEVibACxOALhDABY2evyFCKxLABYmANwlAIuaZfyFCKxJABYlANQgAAuabfyFCKxHABYkANQiAIuZdfyFCKxFABYjANQkAAuZffyFCKxDABYiANQmAItYZfyFCKxBABYhALQgAAtYbfyFCMxPABYgALQiAJNbdfyFCMxNACYnALQkABNbffyFCMxLACYmALQmAJPaZfyFCMxJACYlAPQgABPabfyFCMxHACYkAPQiAJPZdfyFCMxFACYjAPQkABPZffyFCMxDACYiAPQmAJNIGX8hAnMQgEkIACMIwATSxl+IwHgCMAEBYBQBGCx1/IUIjCUAgwmAAIwkAAOlj78QgXEEYCABeCUA4wjAIMb/ngiMIQCDCMB7AjCGAAxg/I+JQH8CMIAAPCYA/QlAZ8b/nAj0JQCdCcBzAtCXAHRk/MeIQD8C0JEAHCMA/QhAJ8Z/jgj0IQCdCMA5AtCHAHRg/NeIQHsC0IEAXCMA7QlAY8Z/jwi0JQCNCcA9AtCWADRk/HWIQDsC0JAA1CEA7QhAI8Zflwi0IQCNCEBdAtCGADRg/G2IQH0C0IAAtCEA9QlAZcbflgjUJQCVCUBbAlCXAFRk/H2IQD0CUJEA9CEA9QhAJcbflwjUIQCVCEBfAlCHAFRg/GOIwH0CUIEAjCEA9wnATcY/lgjcIwA3CcBYAnCPANxg/HMQgesE4AYBmIMAXCcAFxn/XETgGgG4SADmIgDXCMAFxj8nEThPAC4QgDkJwHkCcJLxz00EzhGAkwRgbgJwjgCcYPxrEIHjBOAEAViDABwnAAcZ/1pE4BgBOEgA1iIAxwjAAca/JhH4mgAcIABrEoCvCcAXjH9tIvCcAHxBANYmAM8JwBPGvwcR+JwAPCEAexCAzwnAJ4x/LyLwmAB8QgD2IgCPCcADxr8nEfidADwgAHsSgN8JwAfGvzcReE8APhCAvQnAewLwhvFnEIFfBOANAcggAL8IwE/Gn0UEXgnATwKQRQBeCcAL488kAgLwgwBkEgABeHkB40+WHoH4AEAyAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAINh/p/JoLhfYRNsAAAAASUVORK5CYII=" alt="a brown triangle"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/windowless/" 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">12/29/2021, 6:33:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>With all that you should have an image like this.</p> <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFq0lEQVR4nO3U2XVcRxBEQcovOiJf5IY8kl8SRLAPAXAweEvvGfFRFlTeP/786+9/vwGRBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEINj3b/+83G8v9/vLJZEABBMABCBUGX8hApkEIJQA8D8BCPRx/IUI5BGAQAJAIQBhPht/IQJZBCCMAPCWAAT5avyFCOQQgCACwEcCEOLo+AsRyCAAIQSARwQgwNnxFyKwPwEIIAB8RgA2d3X8hQjsTQA2JwA8IwAbuzv+QgT2JQAbEwC+IgCbqjX+QgT2JACbEgCOEIAN1R5/IQL7EYANCQBHCcBmWo2/EIG9CMBmBIAzBGAjrcdfiMA+BGAjAsBZArCJXuMvRGAPArAJAeAKAdhA7/EXIrA+AdiAAHCVACxu1PgLEVibACxOALhDABY2evyFCKxLABYmANwlAIuaZfyFCKxJABYlANQgAAuabfyFCKxHABYkANQiAIuZdfyFCKxFABYjANQkAAuZffyFCKxDABYiANQmAItYZfyFCKxBABYhALQgAAtYbfyFCMxPABYgALQiAJNbdfyFCMxNACYnALQkABNbffyFCMxLACYmALQmAJPaZfyFCMxJACYlAPQgABPabfyFCMxHACYkAPQiAJPZdfyFCMxFACYjAPQkABPZffyFCMxDACYiAPQmAJNIGX8hAnMQgEkIACMIwATSxl+IwHgCMAEBYBQBGCx1/IUIjCUAgwmAAIwkAAOlj78QgXEEYCABeCUA4wjAIMb/ngiMIQCDCMB7AjCGAAxg/I+JQH8CMIAAPCYA/QlAZ8b/nAj0JQCdCcBzAtCXAHRk/MeIQD8C0JEAHCMA/QhAJ8Z/jgj0IQCdCMA5AtCHAHRg/NeIQHsC0IEAXCMA7QlAY8Z/jwi0JQCNCcA9AtCWADRk/HWIQDsC0JAA1CEA7QhAI8Zflwi0IQCNCEBdAtCGADRg/G2IQH0C0IAAtCEA9QlAZcbflgjUJQCVCUBbAlCXAFRk/H2IQD0CUJEA9CEA9QhAJcbflwjUIQCVCEBfAlCHAFRg/GOIwH0CUIEAjCEA9wnATcY/lgjcIwA3CcBYAnCPANxg/HMQgesE4AYBmIMAXCcAFxn/XETgGgG4SADmIgDXCMAFxj8nEThPAC4QgDkJwHkCcJLxz00EzhGAkwRgbgJwjgCcYPxrEIHjBOAEAViDABwnAAcZ/1pE4BgBOEgA1iIAxwjAAca/JhH4mgAcIABrEoCvCcAXjH9tIvCcAHxBANYmAM8JwBPGvwcR+JwAPCEAexCAzwnAJ4x/LyLwmAB8QgD2IgCPCcADxr8nEfidADwgAHsSgN8JwAfGvzcReE8APhCAvQnAewLwhvFnEIFfBOANAcggAL8IwE/Gn0UEXgnATwKQRQBeCcAL488kAgLwgwBkEgABeHkB40+WHoH4AEAyAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAINh/p/JoLhfYRNsAAAAASUVORK5CYII=" alt="a brown triangle"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/windowless/" 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">12/29/2021, 6:57:29 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/showcase/" class="prev router-link-active">
           Foreward
@@ -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.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/24.6a0d1e12.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/24.6a0d1e12.js" defer></script><script src="/learn-wgpu/assets/js/25.5a7a1f31.js" defer></script>
   </body>
 </html>
diff --git a/todo.html b/todo.html
index 8d1c874d..fe0de0c1 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="2021-12-29T18:33:55.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
-    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.4f7da77a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/34.d664ca20.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.6c6630a3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.19aa8b8d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8d139978.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
+    <meta property="article:modified_time" content="2021-12-29T18:57:29.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 Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.4fb695a1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.3b58db7b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.c4741047.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/34.d664ca20.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.e1054b07.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.9b2446b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.918ac8f8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.7e1fa0ed.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c591e8de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.1aaaa4a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ceea0609.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8b83d0ae.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.57f53ce3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.b3e867e8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.3043ebc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.78cf842d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.140d2648.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.178de04f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.d1c5beb9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ffb83767.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6a0d1e12.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5a7a1f31.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.a5048f3d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.f1adef47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.f4a55ac6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.c45319b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.51e45a26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.8816c903.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.cc41f1b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.4daba1cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.32255abc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.c0c5124a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.fa165590.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.5bff8dca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.9e1be960.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.b80b1345.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.37f85b77.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.4fb695a1.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-surface/" class="sidebar-link">The Surface</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><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></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">12/29/2021, 6:33:55 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.4f7da77a.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/34.d664ca20.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-surface/" class="sidebar-link">The Surface</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><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></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">12/29/2021, 6:57:29 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
+    <script src="/learn-wgpu/assets/js/app.3b58db7b.js" defer></script><script src="/learn-wgpu/assets/js/4.c4741047.js" defer></script><script src="/learn-wgpu/assets/js/34.d664ca20.js" defer></script>
   </body>
 </html>