diff --git a/12009c27a4a978c1d5d2.module.wasm b/12009c27a4a978c1d5d2.module.wasm new file mode 100644 index 00000000..1db4ba62 Binary files /dev/null and b/12009c27a4a978c1d5d2.module.wasm differ diff --git a/047be78862755a210e49.module.wasm b/19af522b49e271c2cb8d.module.wasm similarity index 76% rename from 047be78862755a210e49.module.wasm rename to 19af522b49e271c2cb8d.module.wasm index ffd39abc..38626368 100644 Binary files a/047be78862755a210e49.module.wasm and b/19af522b49e271c2cb8d.module.wasm differ diff --git a/36ce24f0985df39915d4.module.wasm b/36ce24f0985df39915d4.module.wasm new file mode 100644 index 00000000..2cc9c729 Binary files /dev/null and b/36ce24f0985df39915d4.module.wasm differ diff --git a/02c4a43d969c401c03d1.module.wasm b/3931c389f48b7fa3bc6c.module.wasm similarity index 77% rename from 02c4a43d969c401c03d1.module.wasm rename to 3931c389f48b7fa3bc6c.module.wasm index d3535d4e..4ba345e5 100644 Binary files a/02c4a43d969c401c03d1.module.wasm and b/3931c389f48b7fa3bc6c.module.wasm differ diff --git a/3d88f31de9cafc0fb0c5.module.wasm b/3d88f31de9cafc0fb0c5.module.wasm new file mode 100644 index 00000000..440e21c2 Binary files /dev/null and b/3d88f31de9cafc0fb0c5.module.wasm differ diff --git a/404.html b/404.html index 9232eba9..6090a83c 100644 --- a/404.html +++ b/404.html @@ -8,11 +8,11 @@ - +

404

That's a Four-Oh-Four.
Take me home.
- + diff --git a/46677e033e8188fb77d1.module.wasm b/46677e033e8188fb77d1.module.wasm deleted file mode 100644 index 442b78f3..00000000 Binary files a/46677e033e8188fb77d1.module.wasm and /dev/null differ diff --git a/49f34e8d6f93e0fb1837.module.wasm b/49f34e8d6f93e0fb1837.module.wasm deleted file mode 100644 index 568cd926..00000000 Binary files a/49f34e8d6f93e0fb1837.module.wasm and /dev/null differ diff --git a/4c816ed504aadff6e006.module.wasm b/4c816ed504aadff6e006.module.wasm deleted file mode 100644 index 194a642b..00000000 Binary files a/4c816ed504aadff6e006.module.wasm and /dev/null differ diff --git a/4cb19c8422c3644b7f25.module.wasm b/4cb19c8422c3644b7f25.module.wasm deleted file mode 100644 index eadd6052..00000000 Binary files a/4cb19c8422c3644b7f25.module.wasm and /dev/null differ diff --git a/502ffd6c668744ec24b4.module.wasm b/502ffd6c668744ec24b4.module.wasm new file mode 100644 index 00000000..9f352620 Binary files /dev/null and b/502ffd6c668744ec24b4.module.wasm differ diff --git a/534c303654e66886b467.module.wasm b/534c303654e66886b467.module.wasm deleted file mode 100644 index 39cf0b9a..00000000 Binary files a/534c303654e66886b467.module.wasm and /dev/null differ diff --git a/5e8be452bd9f2a967452.module.wasm b/5e8be452bd9f2a967452.module.wasm new file mode 100644 index 00000000..27502d5f Binary files /dev/null and b/5e8be452bd9f2a967452.module.wasm differ diff --git a/5f1652083ccb4796f3a0.module.wasm b/5f1652083ccb4796f3a0.module.wasm new file mode 100644 index 00000000..1716b1a0 Binary files /dev/null and b/5f1652083ccb4796f3a0.module.wasm differ diff --git a/74148777c8a8ed45e35d.module.wasm b/74148777c8a8ed45e35d.module.wasm deleted file mode 100644 index 92c29e01..00000000 Binary files a/74148777c8a8ed45e35d.module.wasm and /dev/null differ diff --git a/88f94621f26a807e91bc.module.wasm b/88f94621f26a807e91bc.module.wasm new file mode 100644 index 00000000..47f33be4 Binary files /dev/null and b/88f94621f26a807e91bc.module.wasm differ diff --git a/8dd7817c714bf9a3da10.module.wasm b/8dd7817c714bf9a3da10.module.wasm deleted file mode 100644 index cae16cfd..00000000 Binary files a/8dd7817c714bf9a3da10.module.wasm and /dev/null differ diff --git a/a3f68ffb2b5949139253.module.wasm b/a3f68ffb2b5949139253.module.wasm deleted file mode 100644 index 61cec33c..00000000 Binary files a/a3f68ffb2b5949139253.module.wasm and /dev/null differ diff --git a/assets/js/1.eaeeb819.js b/assets/js/1.f95c152b.js similarity index 98% rename from assets/js/1.eaeeb819.js rename to assets/js/1.f95c152b.js index 39a2c68f..09f8f3d6 100644 --- a/assets/js/1.eaeeb819.js +++ b/assets/js/1.f95c152b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1,24,25,39,40,45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return s})),n.d(e,"a",(function(){return r})),n.d(e,"i",(function(){return o})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return p})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return m}));n(93);const s=/#.*$/,i=/\.(md|html)$/,r=/\/$/,o=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function a(t){return decodeURI(t).replace(s,"").replace(i,"")}function l(t){return o.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;const e=t.match(s),n=e?e[0]:"",i=a(t);return r.test(i)?t:i+".html"+n}function f(t,e){const n=t.hash,i=function(t){const e=t.match(s);if(e)return e[0]}(e);if(i&&n!==i)return!1;return a(t.path)===a(e)}function p(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const s=t.charAt(0);if("/"===s)return t;if("?"===s||"#"===s)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const r=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const a=o.sidebar||r.sidebar;if(a){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const s in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(s)))return{base:s,config:e[s]};var n;return{}}(e,a);return n?n.map(e=>function t(e,n,s,i=1){if("string"==typeof e)return p(n,e,s);if(Array.isArray(e))return Object.assign(p(n,e[0],s),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const r=e.children||[];return 0===r.length&&e.path?Object.assign(p(n,e.path,s),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:r.map(e=>t(e,n,s,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var s=n(261),i={props:{item:{required:!0}},computed:{link(){return Object(s.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:s.f,isMailto:s.g,isTel:s.h}},r=n(7),o=Object(r.a)(i,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=o.exports},287:function(t,e,n){"use strict";n.r(e);var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(288),n(7)),r=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=r.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},291:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},296:function(t,e,n){"use strict";n.r(e);var s=n(286),i=n(287),r={components:{NavLink:s.default,DropdownTransition:i.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(293),n(7)),a=Object(o.a)(r,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,s){return e("li",{key:n.link||s,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=a.exports},299:function(t,e,n){"use strict";n(291)},300:function(t,e,n){},304:function(t,e,n){"use strict";n.r(e);var s=n(296),i=n(261),r={components:{NavLink:n(286).default,DropdownLink:s.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,s=this.$site.themeConfig.locales||{},i={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(t).map(i=>{const r=t[i],o=s[i]&&s[i].label||r.lang;let a;return r.lang===this.$lang?a=e:(a=e.replace(this.$localeConfig.path,i),n.some(t=>t.path===a)||(a=i)),{text:o,link:a}})};return[...this.userNav,i]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;if(t)return/^https?:/.test(t)?t:"https://github.com/"+t},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n{let s=i()(e,"title","");return i()(e,"frontmatter.tags")&&(s+=" "+e.frontmatter.tags.join(" ")),n&&(s+=" "+n),o(t,s)};const o=(t,e)=>{const n=t=>t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),s=new RegExp("[^\0-]"),i=t.split(/\s+/g).map(t=>t.trim()).filter(t=>!!t);if(s.test(t))return i.some(t=>e.toLowerCase().indexOf(t)>-1);{const s=t.endsWith(" ");return new RegExp(i.map((t,e)=>i.length!==e+1||s?`(?=.*\\b${n(t)}\\b)`:`(?=.*\\b${n(t)})`).join("")+".+","gi").test(e)}};var a={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const t=this.query.trim().toLowerCase();if(!t)return;const{pages:e}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||5,s=this.$localePath,i=[];for(let o=0;o=n);o++){const a=e[o];if(this.getPageLocalePath(a)===s&&this.isSearchable(a))if(r(t,a))i.push(a);else if(a.headers)for(let e=0;e=n);e++){const n=a.headers[e];n.title&&r(t,a,n.title)&&i.push(Object.assign({},a,{path:a.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(t){for(const e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable(t){let e=null;return null===e||(e=Array.isArray(e)?e:new Array(e),e.filter(e=>t.path.match(e)).length>0)},onHotkey(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex "+t._s(n.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports,c=n(321),h=n(304);function f(t,e){return t.ownerDocument.defaultView.getComputedStyle(t,null)[e]}var p={components:{SidebarButton:c.default,NavLinks:h.default,SearchBox:u,AlgoliaSearchBox:{}},data:()=>({linksWrapMaxWidth:null}),mounted(){const t=parseInt(f(this.$el,"paddingLeft"))+parseInt(f(this.$el,"paddingRight")),e=()=>{document.documentElement.clientWidth<719?this.linksWrapMaxWidth=null:this.linksWrapMaxWidth=this.$el.offsetWidth-t-(this.$refs.siteName&&this.$refs.siteName.offsetWidth||0)};e(),window.addEventListener("resize",e,!1)},computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}}},d=(n(324),Object(l.a)(p,(function(){var t=this,e=t._self._c;return e("header",{staticClass:"navbar"},[e("div",{staticClass:"inner"},[e("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),e("router-link",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?e("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?e("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),e("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[e("NavLinks",{staticClass:"can-hide"}),t._v(" "),t.isAlgoliaSearch?e("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?e("SearchBox"):t._e()],1)],1)])}),[],!1,null,null,null));e.default=d.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[1,24,25,39,40,45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return s})),n.d(e,"a",(function(){return r})),n.d(e,"i",(function(){return o})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return p})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return m}));n(92);const s=/#.*$/,i=/\.(md|html)$/,r=/\/$/,o=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function a(t){return decodeURI(t).replace(s,"").replace(i,"")}function l(t){return o.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;const e=t.match(s),n=e?e[0]:"",i=a(t);return r.test(i)?t:i+".html"+n}function f(t,e){const n=t.hash,i=function(t){const e=t.match(s);if(e)return e[0]}(e);if(i&&n!==i)return!1;return a(t.path)===a(e)}function p(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const s=t.charAt(0);if("/"===s)return t;if("?"===s||"#"===s)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const r=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const a=o.sidebar||r.sidebar;if(a){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const s in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(s)))return{base:s,config:e[s]};var n;return{}}(e,a);return n?n.map(e=>function t(e,n,s,i=1){if("string"==typeof e)return p(n,e,s);if(Array.isArray(e))return Object.assign(p(n,e[0],s),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const r=e.children||[];return 0===r.length&&e.path?Object.assign(p(n,e.path,s),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:r.map(e=>t(e,n,s,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var s=n(261),i={props:{item:{required:!0}},computed:{link(){return Object(s.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:s.f,isMailto:s.g,isTel:s.h}},r=n(7),o=Object(r.a)(i,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=o.exports},287:function(t,e,n){"use strict";n.r(e);var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(288),n(7)),r=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=r.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},291:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},296:function(t,e,n){"use strict";n.r(e);var s=n(286),i=n(287),r={components:{NavLink:s.default,DropdownTransition:i.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(293),n(7)),a=Object(o.a)(r,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,s){return e("li",{key:n.link||s,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=a.exports},299:function(t,e,n){"use strict";n(291)},300:function(t,e,n){},304:function(t,e,n){"use strict";n.r(e);var s=n(296),i=n(261),r={components:{NavLink:n(286).default,DropdownLink:s.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,s=this.$site.themeConfig.locales||{},i={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(t).map(i=>{const r=t[i],o=s[i]&&s[i].label||r.lang;let a;return r.lang===this.$lang?a=e:(a=e.replace(this.$localeConfig.path,i),n.some(t=>t.path===a)||(a=i)),{text:o,link:a}})};return[...this.userNav,i]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;if(t)return/^https?:/.test(t)?t:"https://github.com/"+t},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n{let s=i()(e,"title","");return i()(e,"frontmatter.tags")&&(s+=" "+e.frontmatter.tags.join(" ")),n&&(s+=" "+n),o(t,s)};const o=(t,e)=>{const n=t=>t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),s=new RegExp("[^\0-]"),i=t.split(/\s+/g).map(t=>t.trim()).filter(t=>!!t);if(s.test(t))return i.some(t=>e.toLowerCase().indexOf(t)>-1);{const s=t.endsWith(" ");return new RegExp(i.map((t,e)=>i.length!==e+1||s?`(?=.*\\b${n(t)}\\b)`:`(?=.*\\b${n(t)})`).join("")+".+","gi").test(e)}};var a={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const t=this.query.trim().toLowerCase();if(!t)return;const{pages:e}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||5,s=this.$localePath,i=[];for(let o=0;o=n);o++){const a=e[o];if(this.getPageLocalePath(a)===s&&this.isSearchable(a))if(r(t,a))i.push(a);else if(a.headers)for(let e=0;e=n);e++){const n=a.headers[e];n.title&&r(t,a,n.title)&&i.push(Object.assign({},a,{path:a.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(t){for(const e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable(t){let e=null;return null===e||(e=Array.isArray(e)?e:new Array(e),e.filter(e=>t.path.match(e)).length>0)},onHotkey(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex "+t._s(n.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports,c=n(321),h=n(304);function f(t,e){return t.ownerDocument.defaultView.getComputedStyle(t,null)[e]}var p={components:{SidebarButton:c.default,NavLinks:h.default,SearchBox:u,AlgoliaSearchBox:{}},data:()=>({linksWrapMaxWidth:null}),mounted(){const t=parseInt(f(this.$el,"paddingLeft"))+parseInt(f(this.$el,"paddingRight")),e=()=>{document.documentElement.clientWidth<719?this.linksWrapMaxWidth=null:this.linksWrapMaxWidth=this.$el.offsetWidth-t-(this.$refs.siteName&&this.$refs.siteName.offsetWidth||0)};e(),window.addEventListener("resize",e,!1)},computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}}},d=(n(324),Object(l.a)(p,(function(){var t=this,e=t._self._c;return e("header",{staticClass:"navbar"},[e("div",{staticClass:"inner"},[e("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),e("router-link",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?e("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?e("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),e("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[e("NavLinks",{staticClass:"can-hide"}),t._v(" "),t.isAlgoliaSearch?e("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?e("SearchBox"):t._e()],1)],1)])}),[],!1,null,null,null));e.default=d.exports}}]); \ No newline at end of file diff --git a/assets/js/10.1397960e.js b/assets/js/10.1397960e.js deleted file mode 100644 index f9990288..00000000 --- a/assets/js/10.1397960e.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{245:function(n,t,r){"use strict";(function(n){r.d(t,"kf",(function(){return u})),r.d(t,"Ch",(function(){return E})),r.d(t,"zh",(function(){return O})),r.d(t,"yh",(function(){return C})),r.d(t,"Vg",(function(){return V})),r.d(t,"xh",(function(){return U})),r.d(t,"Ah",(function(){return j})),r.d(t,"le",(function(){return q})),r.d(t,"uf",(function(){return W})),r.d(t,"Lc",(function(){return K})),r.d(t,"Nc",(function(){return Y})),r.d(t,"vh",(function(){return G})),r.d(t,"Ug",(function(){return N})),r.d(t,"wh",(function(){return Q})),r.d(t,"Nd",(function(){return X})),r.d(t,"m",(function(){return H})),r.d(t,"n",(function(){return z})),r.d(t,"u",(function(){return J})),r.d(t,"y",(function(){return Z})),r.d(t,"J",(function(){return $})),r.d(t,"L",(function(){return nn})),r.d(t,"K",(function(){return tn})),r.d(t,"O",(function(){return rn})),r.d(t,"X",(function(){return en})),r.d(t,"Y",(function(){return un})),r.d(t,"Z",(function(){return fn})),r.d(t,"ab",(function(){return cn})),r.d(t,"cb",(function(){return on})),r.d(t,"lb",(function(){return _n})),r.d(t,"mb",(function(){return dn})),r.d(t,"ob",(function(){return an})),r.d(t,"nb",(function(){return bn})),r.d(t,"pb",(function(){return gn})),r.d(t,"sb",(function(){return wn})),r.d(t,"Ab",(function(){return sn})),r.d(t,"Db",(function(){return ln})),r.d(t,"Jb",(function(){return mn})),r.d(t,"Vb",(function(){return pn})),r.d(t,"Yb",(function(){return yn})),r.d(t,"bc",(function(){return hn})),r.d(t,"fc",(function(){return vn})),r.d(t,"xc",(function(){return xn})),r.d(t,"Bc",(function(){return Sn})),r.d(t,"Dc",(function(){return An})),r.d(t,"Ic",(function(){return Tn})),r.d(t,"Mc",(function(){return In})),r.d(t,"Tc",(function(){return Pn})),r.d(t,"bd",(function(){return Dn})),r.d(t,"fd",(function(){return En})),r.d(t,"td",(function(){return Fn})),r.d(t,"ud",(function(){return Bn})),r.d(t,"Pd",(function(){return Rn})),r.d(t,"Ne",(function(){return Mn})),r.d(t,"Qe",(function(){return kn})),r.d(t,"Pe",(function(){return Ln})),r.d(t,"Te",(function(){return On})),r.d(t,"Ze",(function(){return Cn})),r.d(t,"af",(function(){return Vn})),r.d(t,"Kf",(function(){return Un})),r.d(t,"Lf",(function(){return jn})),r.d(t,"Qf",(function(){return qn})),r.d(t,"Pf",(function(){return Wn})),r.d(t,"Mf",(function(){return Kn})),r.d(t,"Of",(function(){return Yn})),r.d(t,"Nf",(function(){return Gn})),r.d(t,"Sf",(function(){return Nn})),r.d(t,"Wf",(function(){return Qn})),r.d(t,"Tf",(function(){return Xn})),r.d(t,"Vf",(function(){return Hn})),r.d(t,"Uf",(function(){return zn})),r.d(t,"fg",(function(){return Jn})),r.d(t,"ig",(function(){return Zn})),r.d(t,"kg",(function(){return $n})),r.d(t,"mg",(function(){return nt})),r.d(t,"pg",(function(){return tt})),r.d(t,"sg",(function(){return rt})),r.d(t,"tg",(function(){return et})),r.d(t,"ug",(function(){return ut})),r.d(t,"wg",(function(){return ft})),r.d(t,"zg",(function(){return ct})),r.d(t,"Fg",(function(){return ot})),r.d(t,"Gg",(function(){return it})),r.d(t,"a",(function(){return _t})),r.d(t,"k",(function(){return dt})),r.d(t,"o",(function(){return at})),r.d(t,"r",(function(){return bt})),r.d(t,"s",(function(){return gt})),r.d(t,"v",(function(){return wt})),r.d(t,"z",(function(){return st})),r.d(t,"D",(function(){return lt})),r.d(t,"B",(function(){return mt})),r.d(t,"H",(function(){return pt})),r.d(t,"G",(function(){return yt})),r.d(t,"hb",(function(){return ht})),r.d(t,"ib",(function(){return vt})),r.d(t,"qb",(function(){return xt})),r.d(t,"tb",(function(){return St})),r.d(t,"wb",(function(){return At})),r.d(t,"yb",(function(){return Tt})),r.d(t,"Bb",(function(){return It})),r.d(t,"Eb",(function(){return Pt})),r.d(t,"Gb",(function(){return Dt})),r.d(t,"Nb",(function(){return Et})),r.d(t,"Pb",(function(){return Ft})),r.d(t,"Rb",(function(){return Bt})),r.d(t,"Tb",(function(){return Rt})),r.d(t,"Wb",(function(){return Mt})),r.d(t,"Zb",(function(){return kt})),r.d(t,"cc",(function(){return Lt})),r.d(t,"kc",(function(){return Ot})),r.d(t,"lc",(function(){return Ct})),r.d(t,"nc",(function(){return Vt})),r.d(t,"tc",(function(){return Ut})),r.d(t,"qc",(function(){return jt})),r.d(t,"yc",(function(){return qt})),r.d(t,"Gc",(function(){return Wt})),r.d(t,"Fc",(function(){return Kt})),r.d(t,"Pc",(function(){return Yt})),r.d(t,"Sc",(function(){return Gt})),r.d(t,"Wc",(function(){return Nt})),r.d(t,"Yc",(function(){return Qt})),r.d(t,"ed",(function(){return Xt})),r.d(t,"hd",(function(){return Ht})),r.d(t,"kd",(function(){return zt})),r.d(t,"md",(function(){return Jt})),r.d(t,"nd",(function(){return Zt})),r.d(t,"pd",(function(){return $t})),r.d(t,"rd",(function(){return nr})),r.d(t,"wd",(function(){return tr})),r.d(t,"Wd",(function(){return rr})),r.d(t,"Ee",(function(){return er})),r.d(t,"Ie",(function(){return ur})),r.d(t,"Ve",(function(){return fr})),r.d(t,"cf",(function(){return cr})),r.d(t,"pf",(function(){return or})),r.d(t,"xf",(function(){return ir})),r.d(t,"Af",(function(){return _r})),r.d(t,"zf",(function(){return dr})),r.d(t,"Df",(function(){return ar})),r.d(t,"Jf",(function(){return br})),r.d(t,"cg",(function(){return gr})),r.d(t,"eg",(function(){return wr})),r.d(t,"og",(function(){return sr})),r.d(t,"Cg",(function(){return lr})),r.d(t,"Hg",(function(){return mr})),r.d(t,"Mg",(function(){return pr})),r.d(t,"Od",(function(){return yr})),r.d(t,"uc",(function(){return hr})),r.d(t,"Yd",(function(){return vr})),r.d(t,"Kd",(function(){return xr})),r.d(t,"Jd",(function(){return Sr})),r.d(t,"pc",(function(){return Ar})),r.d(t,"ae",(function(){return Tr})),r.d(t,"zd",(function(){return Ir})),r.d(t,"U",(function(){return Pr})),r.d(t,"We",(function(){return Dr})),r.d(t,"bb",(function(){return Er})),r.d(t,"hf",(function(){return Fr})),r.d(t,"Xc",(function(){return Br})),r.d(t,"vb",(function(){return Rr})),r.d(t,"dd",(function(){return Mr})),r.d(t,"Me",(function(){return kr})),r.d(t,"ad",(function(){return Lr})),r.d(t,"Xe",(function(){return Or})),r.d(t,"ef",(function(){return Cr})),r.d(t,"ff",(function(){return Vr})),r.d(t,"Gf",(function(){return Ur})),r.d(t,"M",(function(){return jr})),r.d(t,"N",(function(){return qr})),r.d(t,"P",(function(){return Wr})),r.d(t,"kb",(function(){return Kr})),r.d(t,"Oe",(function(){return Yr})),r.d(t,"Rf",(function(){return Gr})),r.d(t,"gg",(function(){return Nr})),r.d(t,"hg",(function(){return Qr})),r.d(t,"jg",(function(){return Xr})),r.d(t,"lg",(function(){return Hr})),r.d(t,"qg",(function(){return zr})),r.d(t,"rg",(function(){return Jr})),r.d(t,"vg",(function(){return Zr})),r.d(t,"xg",(function(){return $r})),r.d(t,"yg",(function(){return ne})),r.d(t,"b",(function(){return te})),r.d(t,"l",(function(){return re})),r.d(t,"p",(function(){return ee})),r.d(t,"q",(function(){return ue})),r.d(t,"t",(function(){return fe})),r.d(t,"w",(function(){return ce})),r.d(t,"A",(function(){return oe})),r.d(t,"E",(function(){return ie})),r.d(t,"C",(function(){return _e})),r.d(t,"I",(function(){return de})),r.d(t,"F",(function(){return ae})),r.d(t,"gb",(function(){return be})),r.d(t,"jb",(function(){return ge})),r.d(t,"rb",(function(){return we})),r.d(t,"ub",(function(){return se})),r.d(t,"xb",(function(){return le})),r.d(t,"zb",(function(){return me})),r.d(t,"Cb",(function(){return pe})),r.d(t,"Fb",(function(){return ye})),r.d(t,"Hb",(function(){return he})),r.d(t,"Mb",(function(){return ve})),r.d(t,"Qb",(function(){return xe})),r.d(t,"Sb",(function(){return Se})),r.d(t,"Ub",(function(){return Ae})),r.d(t,"Xb",(function(){return Te})),r.d(t,"ac",(function(){return Ie})),r.d(t,"dc",(function(){return Pe})),r.d(t,"jc",(function(){return De})),r.d(t,"mc",(function(){return Ee})),r.d(t,"oc",(function(){return Fe})),r.d(t,"sc",(function(){return Be})),r.d(t,"rc",(function(){return Re})),r.d(t,"zc",(function(){return Me})),r.d(t,"Hc",(function(){return ke})),r.d(t,"Ec",(function(){return Le})),r.d(t,"Qc",(function(){return Oe})),r.d(t,"Rc",(function(){return Ce})),r.d(t,"Vc",(function(){return Ve})),r.d(t,"Zc",(function(){return Ue})),r.d(t,"id",(function(){return je})),r.d(t,"jd",(function(){return qe})),r.d(t,"ld",(function(){return We})),r.d(t,"od",(function(){return Ke})),r.d(t,"qd",(function(){return Ye})),r.d(t,"vd",(function(){return Ge})),r.d(t,"Xd",(function(){return Ne})),r.d(t,"De",(function(){return Qe})),r.d(t,"He",(function(){return Xe})),r.d(t,"Ue",(function(){return He})),r.d(t,"bf",(function(){return ze})),r.d(t,"qf",(function(){return Je})),r.d(t,"wf",(function(){return Ze})),r.d(t,"Bf",(function(){return $e})),r.d(t,"yf",(function(){return nu})),r.d(t,"Cf",(function(){return tu})),r.d(t,"If",(function(){return ru})),r.d(t,"bg",(function(){return eu})),r.d(t,"dg",(function(){return uu})),r.d(t,"ng",(function(){return fu})),r.d(t,"Bg",(function(){return cu})),r.d(t,"Ig",(function(){return ou})),r.d(t,"Lg",(function(){return iu})),r.d(t,"Oc",(function(){return _u})),r.d(t,"gf",(function(){return du})),r.d(t,"c",(function(){return au})),r.d(t,"d",(function(){return bu})),r.d(t,"Re",(function(){return gu})),r.d(t,"h",(function(){return wu})),r.d(t,"ie",(function(){return su})),r.d(t,"i",(function(){return lu})),r.d(t,"be",(function(){return mu})),r.d(t,"e",(function(){return pu})),r.d(t,"Se",(function(){return yu})),r.d(t,"ye",(function(){return hu})),r.d(t,"hc",(function(){return vu})),r.d(t,"ic",(function(){return xu})),r.d(t,"gc",(function(){return Su})),r.d(t,"Og",(function(){return Au})),r.d(t,"Fd",(function(){return Tu})),r.d(t,"sd",(function(){return Iu})),r.d(t,"Ob",(function(){return Pu})),r.d(t,"Jc",(function(){return Du})),r.d(t,"Kc",(function(){return Eu})),r.d(t,"Id",(function(){return Fu})),r.d(t,"Zd",(function(){return Bu})),r.d(t,"Ng",(function(){return Ru})),r.d(t,"W",(function(){return Mu})),r.d(t,"Sd",(function(){return ku})),r.d(t,"f",(function(){return Lu})),r.d(t,"Lb",(function(){return Ou})),r.d(t,"rf",(function(){return Cu})),r.d(t,"de",(function(){return Vu})),r.d(t,"Td",(function(){return Uu})),r.d(t,"fb",(function(){return ju})),r.d(t,"gd",(function(){return qu})),r.d(t,"ce",(function(){return Wu})),r.d(t,"Fe",(function(){return Ku})),r.d(t,"Je",(function(){return Yu})),r.d(t,"Ge",(function(){return Gu})),r.d(t,"Ce",(function(){return Nu})),r.d(t,"Pg",(function(){return Qu})),r.d(t,"nf",(function(){return Xu})),r.d(t,"Gd",(function(){return Hu})),r.d(t,"lf",(function(){return zu})),r.d(t,"ve",(function(){return Ju})),r.d(t,"Hf",(function(){return Zu})),r.d(t,"V",(function(){return $u})),r.d(t,"Ke",(function(){return nf})),r.d(t,"Ef",(function(){return tf})),r.d(t,"db",(function(){return rf})),r.d(t,"eb",(function(){return ef})),r.d(t,"Ae",(function(){return uf})),r.d(t,"Be",(function(){return ff})),r.d(t,"Kb",(function(){return cf})),r.d(t,"sf",(function(){return of})),r.d(t,"g",(function(){return _f})),r.d(t,"ee",(function(){return df})),r.d(t,"R",(function(){return af})),r.d(t,"S",(function(){return bf})),r.d(t,"fe",(function(){return gf})),r.d(t,"ge",(function(){return wf})),r.d(t,"x",(function(){return sf})),r.d(t,"Ib",(function(){return lf})),r.d(t,"ec",(function(){return mf})),r.d(t,"tf",(function(){return pf})),r.d(t,"ag",(function(){return yf})),r.d(t,"he",(function(){return hf})),r.d(t,"Ac",(function(){return vf})),r.d(t,"Ld",(function(){return xf})),r.d(t,"Qg",(function(){return Sf})),r.d(t,"of",(function(){return Af})),r.d(t,"Ed",(function(){return Tf})),r.d(t,"mf",(function(){return If})),r.d(t,"cd",(function(){return Pf})),r.d(t,"Kg",(function(){return Df})),r.d(t,"Jg",(function(){return Ef})),r.d(t,"wc",(function(){return Ff})),r.d(t,"Cc",(function(){return Bf})),r.d(t,"Eg",(function(){return Rf})),r.d(t,"Sg",(function(){return Mf})),r.d(t,"Tg",(function(){return kf})),r.d(t,"Uc",(function(){return Lf})),r.d(t,"Md",(function(){return Of})),r.d(t,"Ag",(function(){return Cf})),r.d(t,"vf",(function(){return Vf})),r.d(t,"Dd",(function(){return Uf})),r.d(t,"j",(function(){return jf})),r.d(t,"Xf",(function(){return qf})),r.d(t,"xd",(function(){return Wf})),r.d(t,"Vd",(function(){return Kf})),r.d(t,"ke",(function(){return Yf})),r.d(t,"rh",(function(){return Gf})),r.d(t,"ne",(function(){return Nf})),r.d(t,"sh",(function(){return Qf})),r.d(t,"we",(function(){return Xf})),r.d(t,"xe",(function(){return Hf})),r.d(t,"vc",(function(){return zf})),r.d(t,"Dg",(function(){return Jf})),r.d(t,"Rd",(function(){return Zf})),r.d(t,"yd",(function(){return $f})),r.d(t,"T",(function(){return nc})),r.d(t,"me",(function(){return tc})),r.d(t,"df",(function(){return rc})),r.d(t,"Rg",(function(){return ec})),r.d(t,"Ad",(function(){return uc})),r.d(t,"Bd",(function(){return fc})),r.d(t,"th",(function(){return cc})),r.d(t,"Hd",(function(){return oc})),r.d(t,"ze",(function(){return ic})),r.d(t,"Le",(function(){return _c})),r.d(t,"Qd",(function(){return dc})),r.d(t,"Ye",(function(){return ac})),r.d(t,"Zf",(function(){return bc})),r.d(t,"Yf",(function(){return gc})),r.d(t,"Q",(function(){return wc})),r.d(t,"te",(function(){return sc})),r.d(t,"se",(function(){return lc})),r.d(t,"ue",(function(){return mc})),r.d(t,"qe",(function(){return pc})),r.d(t,"je",(function(){return yc})),r.d(t,"jf",(function(){return hc})),r.d(t,"Ud",(function(){return vc})),r.d(t,"oe",(function(){return xc})),r.d(t,"re",(function(){return Sc})),r.d(t,"pe",(function(){return Ac})),r.d(t,"Ff",(function(){return Tc})),r.d(t,"Cd",(function(){return Ic})),r.d(t,"if",(function(){return Pc})),r.d(t,"qh",(function(){return Dc})),r.d(t,"Bh",(function(){return Ec})),r.d(t,"uh",(function(){return Fc})),r.d(t,"hh",(function(){return Bc})),r.d(t,"ih",(function(){return Rc})),r.d(t,"jh",(function(){return Mc})),r.d(t,"kh",(function(){return kc})),r.d(t,"lh",(function(){return Lc})),r.d(t,"mh",(function(){return Oc})),r.d(t,"nh",(function(){return Cc})),r.d(t,"oh",(function(){return Vc})),r.d(t,"ph",(function(){return Uc})),r.d(t,"Wg",(function(){return jc})),r.d(t,"Xg",(function(){return qc})),r.d(t,"Yg",(function(){return Wc})),r.d(t,"Zg",(function(){return Kc})),r.d(t,"ah",(function(){return Yc})),r.d(t,"bh",(function(){return Gc})),r.d(t,"ch",(function(){return Nc})),r.d(t,"dh",(function(){return Qc})),r.d(t,"eh",(function(){return Xc})),r.d(t,"fh",(function(){return Hc})),r.d(t,"gh",(function(){return zc}));r(93),r(263),r(267),r(270),r(271),r(274),r(276),r(278),r(100),r(282),r(284);let e;function u(n){e=n}const f=new Array(128).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);let o=0,i=null;function _(){return null!==i&&0!==i.byteLength||(i=new Uint8Array(e.memory.buffer)),i}let d=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const a="function"==typeof d.encodeInto?function(n,t){return d.encodeInto(n,t)}:function(n,t){const r=d.encode(n);return t.set(r),{read:n.length,written:r.length}};function b(n,t,r){if(void 0===r){const r=d.encode(n),e=t(r.length,1)>>>0;return _().subarray(e,e+r.length).set(r),o=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=_();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=_().subarray(u+c,u+e);c+=a(n,t).written}return o=c,u}function g(n){return null==n}let w=null;function s(){return null!==w&&0!==w.byteLength||(w=new Int32Array(e.memory.buffer)),w}let l=f.length;function m(n){const t=c(n);return function(n){n<132||(f[n]=l,l=n)}(n),t}function p(n){l===f.length&&f.push(f.length+1);const t=l;return l=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(_().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h201af18f11d7a004(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h99d23606e6458444(n,t)}function T(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h07c1c5e905765d72(n,t,p(r))}function I(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h303f1f95dddb80bc(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,s().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function C(n){m(n)}function V(n){const t=m(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=b(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=g(u)?0:u,s()[n/4+0]=!g(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return g(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return g(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return g(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return g(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return g(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return g(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return g(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return g(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return g(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return g(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return g(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return g(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return g(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return g(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function hr(n){const t=c(n).document;return g(t)?0:p(t)}function vr(n){return p(c(n).location)}function xr(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Sr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Ar(n){return c(n).devicePixelRatio}function Tr(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return g(e)?0:p(e)}),arguments)}function Ir(n,t,r){const e=c(n)[h(t,r)];return g(e)?0:p(e)}function Pr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Dr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Er(n,t){c(n).clearTimeout(t)}function Fr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Br(n){const t=c(n).fullscreenElement;return g(t)?0:p(t)}function Rr(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Mr(n,t,r){const e=c(n).getElementById(h(t,r));return g(e)?0:p(e)}function kr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return g(e)?0:p(e)}),arguments)}function Lr(n){return p(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Cr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function Vr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function qr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Kr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Yr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Gr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Qr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Xr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function Hr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function zr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Jr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function Zr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function $r(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function te(n,t){c(n).activeTexture(t>>>0)}function re(n,t,r){c(n).attachShader(c(t),c(r))}function ee(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindTexture(t>>>0,c(r))}function oe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ie(n,t){c(n).blendEquation(t>>>0)}function _e(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function de(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function ae(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function be(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ge(n,t){c(n).compileShader(c(t))}function we(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function se(n){const t=c(n).createBuffer();return g(t)?0:p(t)}function le(n){const t=c(n).createFramebuffer();return g(t)?0:p(t)}function me(n){const t=c(n).createProgram();return g(t)?0:p(t)}function pe(n){const t=c(n).createRenderbuffer();return g(t)?0:p(t)}function ye(n,t){const r=c(n).createShader(t>>>0);return g(r)?0:p(r)}function he(n){const t=c(n).createTexture();return g(t)?0:p(t)}function ve(n,t){c(n).cullFace(t>>>0)}function xe(n,t){c(n).deleteBuffer(c(t))}function Se(n,t){c(n).deleteFramebuffer(c(t))}function Ae(n,t){c(n).deleteProgram(c(t))}function Te(n,t){c(n).deleteRenderbuffer(c(t))}function Ie(n,t){c(n).deleteShader(c(t))}function Pe(n,t){c(n).deleteTexture(c(t))}function De(n,t){c(n).depthFunc(t>>>0)}function Ee(n,t){c(n).depthMask(0!==t)}function Fe(n,t,r){c(n).depthRange(t,r)}function Be(n,t){c(n).disable(t>>>0)}function Re(n,t){c(n).disableVertexAttribArray(t>>>0)}function Me(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function ke(n,t){c(n).enable(t>>>0)}function Le(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ce(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ve(n,t){c(n).frontFace(t>>>0)}function Ue(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return g(e)?0:p(e)}function je(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function qe(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function We(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ke(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function Ye(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ge(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return g(u)?0:p(u)}function Ne(n,t){c(n).linkProgram(c(t))}function Qe(n,t,r){c(n).pixelStorei(t>>>0,r)}function Xe(n,t,r){c(n).polygonOffset(t,r)}function He(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function ze(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Je(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function Ze(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function $e(n,t){c(n).stencilMask(t>>>0)}function nu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function tu(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ru(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function eu(n,t,r){c(n).uniform1f(c(t),r)}function uu(n,t,r){c(n).uniform1i(c(t),r)}function fu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function cu(n,t){c(n).useProgram(c(t))}function ou(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function iu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function _u(n,t){return p(c(n).fetch(c(t)))}function du(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function au(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function bu(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function gu(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function wu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function su(){return L((function(){return p(new Headers)}),arguments)}function lu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function mu(n){return c(n).matches}function pu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function yu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function hu(n){return c(n).now()}function vu(n){return c(n).deltaX}function xu(n){return c(n).deltaY}function Su(n){return c(n).deltaMode}function Au(n){return c(n).width}function Tu(n){return c(n).height}function Iu(n){const t=c(n).getSupportedProfiles();return g(t)?0:p(t)}function Pu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Eu(n,t){console.error(c(n),c(t))}function Fu(n){console.info(c(n))}function Bu(n){console.log(c(n))}function Ru(n){console.warn(c(n))}function Mu(n){return c(n).charCode}function ku(n){return c(n).keyCode}function Lu(n){return c(n).altKey}function Ou(n){return c(n).ctrlKey}function Cu(n){return c(n).shiftKey}function Vu(n){return c(n).metaKey}function Uu(n,t){const r=b(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function ju(n,t){const r=b(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function qu(n,t,r){return c(n).getModifierState(h(t,r))}function Wu(n){return c(n).matches}function Ku(n){return c(n).pointerId}function Yu(n){return c(n).pressure}function Gu(n,t){const r=b(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function Nu(){return L((function(n,t){const r=b(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}),arguments)}function Qu(n){return c(n).width}function Xu(n,t){c(n).width=t>>>0}function Hu(n){return c(n).height}function zu(n,t){c(n).height=t>>>0}function Ju(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function Zu(n){const t=c(n).target;return g(t)?0:p(t)}function $u(n){return c(n).cancelBubble}function nf(n){c(n).preventDefault()}function tf(n){c(n).stopPropagation()}function rf(n){return c(n).clientX}function ef(n){return c(n).clientY}function uf(n){return c(n).offsetX}function ff(n){return c(n).offsetY}function cf(n){return c(n).ctrlKey}function of(n){return c(n).shiftKey}function _f(n){return c(n).altKey}function df(n){return c(n).metaKey}function af(n){return c(n).button}function bf(n){return c(n).buttons}function gf(n){return c(n).movementX}function wf(n){return c(n).movementY}function sf(n,t){c(n).bindVertexArrayOES(c(t))}function lf(n){const t=c(n).createVertexArrayOES();return g(t)?0:p(t)}function mf(n,t){c(n).deleteVertexArrayOES(c(t))}function pf(n){return c(n).size}function yf(n){return c(n).type}function hf(n,t){const r=b(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function vf(n,t){c(n).drawBuffersWEBGL(c(t))}function xf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Sf(n){return c(n).width}function Af(n,t){c(n).width=t>>>0}function Tf(n){return c(n).height}function If(n,t){c(n).height=t>>>0}function Pf(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return g(u)?0:p(u)}),arguments)}function Df(n){return c(n).videoWidth}function Ef(n){return c(n).videoHeight}function Ff(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Bf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Rf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function Mf(n){return c(n).x}function kf(n){return c(n).y}function Lf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Of(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Cf(n,t){const r=b(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function Vf(n){return c(n).status}function Uf(n){return p(c(n).headers)}function jf(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function qf(){return L((function(n){return p(c(n).text())}),arguments)}function Wf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=b(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,107,S))}function Rc(n,t,r){return p(x(n,t,107,S))}function Mc(n,t,r){return p(x(n,t,107,S))}function kc(n,t,r){return p(x(n,t,107,S))}function Lc(n,t,r){return p(x(n,t,107,S))}function Oc(n,t,r){return p(x(n,t,107,S))}function Cc(n,t,r){return p(x(n,t,107,A))}function Vc(n,t,r){return p(x(n,t,107,S))}function Uc(n,t,r){return p(x(n,t,107,S))}function jc(n,t,r){return p(x(n,t,364,T))}function qc(n,t,r){return p(x(n,t,364,T))}function Wc(n,t,r){return p(x(n,t,364,T))}function Kc(n,t,r){return p(x(n,t,364,T))}function Yc(n,t,r){return p(x(n,t,364,T))}function Gc(n,t,r){return p(x(n,t,364,T))}function Nc(n,t,r){return p(x(n,t,364,T))}function Qc(n,t,r){return p(x(n,t,364,T))}function Xc(n,t,r){return p(x(n,t,364,I))}function Hc(n,t,r){return p(x(n,t,452,P))}function zc(n,t,r){return p(x(n,t,808,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h1d95d64cb8cb20c0(n,t)}function A(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h2f6f95f8b13b9647(n,t,p(r))}function T(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h98e03ac5ff8c4ce6(n,t)}function I(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h6df4113cdbe52eb1(n,t,p(r))}function P(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){return p(c(n).getBoundingClientRect())}function hr(){return L((function(n){c(n).requestFullscreen()}),arguments)}function vr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function xr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Sr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Ar(n){const t=c(n).document;return s(t)?0:p(t)}function Tr(n){return p(c(n).location)}function Ir(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Pr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Dr(n){return c(n).devicePixelRatio}function Er(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Fr(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Br(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Mr(n,t){c(n).clearTimeout(t)}function kr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Lr(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Or(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Cr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function Vr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t){return p(c(n).fetch(c(t)))}function qr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Wr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Kr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Yr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Gr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Nr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Qr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function zr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function Jr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Zr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function $r(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function te(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function re(n,t){c(n).activeTexture(t>>>0)}function ee(n,t,r){c(n).attachShader(c(t),c(r))}function ue(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function oe(n,t,r){c(n).bindTexture(t>>>0,c(r))}function ie(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function _e(n,t){c(n).blendEquation(t>>>0)}function de(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ae(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function be(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ge(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function we(n,t){c(n).compileShader(c(t))}function se(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function le(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function me(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function pe(n){const t=c(n).createProgram();return s(t)?0:p(t)}function ye(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function he(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function ve(n){const t=c(n).createTexture();return s(t)?0:p(t)}function xe(n,t){c(n).cullFace(t>>>0)}function Se(n,t){c(n).deleteBuffer(c(t))}function Ae(n,t){c(n).deleteFramebuffer(c(t))}function Te(n,t){c(n).deleteProgram(c(t))}function Ie(n,t){c(n).deleteRenderbuffer(c(t))}function Pe(n,t){c(n).deleteShader(c(t))}function De(n,t){c(n).deleteTexture(c(t))}function Ee(n,t){c(n).depthFunc(t>>>0)}function Fe(n,t){c(n).depthMask(0!==t)}function Be(n,t,r){c(n).depthRange(t,r)}function Re(n,t){c(n).disable(t>>>0)}function Me(n,t){c(n).disableVertexAttribArray(t>>>0)}function ke(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Le(n,t){c(n).enable(t>>>0)}function Oe(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ce(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ve(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ue(n,t){c(n).frontFace(t>>>0)}function je(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function qe(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function We(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ke(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ye(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ge(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ne(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Qe(n,t){c(n).linkProgram(c(t))}function Xe(n,t,r){c(n).pixelStorei(t>>>0,r)}function He(n,t,r){c(n).polygonOffset(t,r)}function ze(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Je(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Ze(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function $e(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function nu(n,t){c(n).stencilMask(t>>>0)}function tu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ru(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function eu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function uu(n,t,r){c(n).uniform1f(c(t),r)}function fu(n,t,r){c(n).uniform1i(c(t),r)}function cu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function ou(n,t){c(n).useProgram(c(t))}function iu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function _u(n,t,r,e,u){c(n).viewport(t,r,e,u)}function du(n){return c(n).charCode}function au(n){return c(n).keyCode}function bu(n){return c(n).altKey}function gu(n){return c(n).ctrlKey}function wu(n){return c(n).shiftKey}function su(n){return c(n).metaKey}function lu(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function mu(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function pu(n,t,r){return c(n).getModifierState(h(t,r))}function yu(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function hu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function vu(n,t){c(n).drawBuffersWEBGL(c(t))}function xu(n){return c(n).x}function Su(n){return c(n).y}function Au(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Tu(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Iu(n){return c(n).status}function Pu(n){return p(c(n).headers)}function Du(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function Eu(){return L((function(n){return p(c(n).text())}),arguments)}function Fu(n){console.debug(c(n))}function Bu(n){console.error(c(n))}function Ru(n,t){console.error(c(n),c(t))}function Mu(n){console.info(c(n))}function ku(n){console.log(c(n))}function Lu(n){console.warn(c(n))}function Ou(){return L((function(){return p(new Headers)}),arguments)}function Cu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function Vu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function Uu(n){return c(n).pointerId}function ju(n){return c(n).pressure}function qu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Wu(n,t){c(n).bindVertexArrayOES(c(t))}function Ku(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function Yu(n,t){c(n).deleteVertexArrayOES(c(t))}function Gu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Nu(n){return c(n).width}function Qu(n,t){c(n).width=t>>>0}function Xu(n){return c(n).height}function Hu(n,t){c(n).height=t>>>0}function zu(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Ju(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function Zu(n){return c(n).width}function $u(n,t){c(n).width=t>>>0}function nf(n){return c(n).height}function tf(n,t){c(n).height=t>>>0}function rf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function ef(n){return c(n).deltaX}function uf(n){return c(n).deltaY}function ff(n){return c(n).deltaMode}function cf(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function of(n){return c(n).width}function _f(n){return c(n).height}function df(n){return c(n).size}function af(n){return c(n).type}function bf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function gf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function wf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function sf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function lf(n){const t=c(n).target;return s(t)?0:p(t)}function mf(n){return c(n).cancelBubble}function pf(n){c(n).preventDefault()}function yf(n){c(n).stopPropagation()}function hf(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function vf(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function xf(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function Sf(n){return c(n).videoWidth}function Af(n){return c(n).videoHeight}function Tf(n){return c(n).clientX}function If(n){return c(n).clientY}function Pf(n){return c(n).offsetX}function Df(n){return c(n).offsetY}function Ef(n){return c(n).ctrlKey}function Ff(n){return c(n).shiftKey}function Bf(n){return c(n).altKey}function Rf(n){return c(n).metaKey}function Mf(n){return c(n).button}function kf(n){return c(n).buttons}function Lf(n){return c(n).movementX}function Of(n){return c(n).movementY}function Cf(n){return c(n).matches}function Vf(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function Uf(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function jf(n){return c(n).matches}function qf(n){return c(n).now()}function Wf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,111,S))}function Rc(n,t,r){return p(x(n,t,111,A))}function Mc(n,t,r){return p(x(n,t,111,A))}function kc(n,t,r){return p(x(n,t,111,A))}function Lc(n,t,r){return p(x(n,t,111,A))}function Oc(n,t,r){return p(x(n,t,111,A))}function Cc(n,t,r){return p(x(n,t,111,A))}function Vc(n,t,r){return p(x(n,t,111,A))}function Uc(n,t,r){return p(x(n,t,111,A))}function jc(n,t,r){return p(x(n,t,333,T))}function qc(n,t,r){return p(x(n,t,333,I))}function Wc(n,t,r){return p(x(n,t,333,I))}function Kc(n,t,r){return p(x(n,t,333,I))}function Yc(n,t,r){return p(x(n,t,333,I))}function Gc(n,t,r){return p(x(n,t,333,I))}function Nc(n,t,r){return p(x(n,t,333,I))}function Qc(n,t,r){return p(x(n,t,333,I))}function Xc(n,t,r){return p(x(n,t,333,I))}function Hc(n,t,r){return p(x(n,t,540,P))}function zc(n,t,r){return p(x(n,t,880,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(0),_=r(1),d=r(9),a=r(8),b=r(91),g=r(94),w=r(12),s=r(95),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(96),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(1),f=r(25),c=r(98),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(0),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return _().subarray(e,e+r.length).set(r),o=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=_();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=_().subarray(u+c,u+e);c+=a(n,t).written}return o=c,u}function g(n){return null==n}let w=null;function s(){return null!==w&&0!==w.byteLength||(w=new Int32Array(e.memory.buffer)),w}let l=f.length;function m(n){const t=c(n);return function(n){n<132||(f[n]=l,l=n)}(n),t}function p(n){l===f.length&&f.push(f.length+1);const t=l;return l=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(_().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h15b6c0ddf7840261(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__he4f661a020fb4a2b(n,t)}function T(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h053786c83ffcc812(n,t,p(r))}function I(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__hd6633f8f3b846871(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,s().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function C(n){m(n)}function V(n){const t=m(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=b(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=g(u)?0:u,s()[n/4+0]=!g(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return g(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return g(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return g(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return g(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return g(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return g(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return g(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return g(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return g(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return g(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return g(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return g(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return g(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return g(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function hr(n){const t=c(n).document;return g(t)?0:p(t)}function vr(n){return p(c(n).location)}function xr(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Sr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Ar(n){return c(n).devicePixelRatio}function Tr(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return g(e)?0:p(e)}),arguments)}function Ir(n,t,r){const e=c(n)[h(t,r)];return g(e)?0:p(e)}function Pr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Dr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Er(n,t){c(n).clearTimeout(t)}function Fr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Br(n){const t=c(n).fullscreenElement;return g(t)?0:p(t)}function Rr(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Mr(n,t,r){const e=c(n).getElementById(h(t,r));return g(e)?0:p(e)}function kr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return g(e)?0:p(e)}),arguments)}function Lr(n){return p(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Cr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function Vr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function qr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Kr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Yr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Gr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Qr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Xr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function Hr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function zr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Jr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function Zr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function $r(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function te(n,t){c(n).activeTexture(t>>>0)}function re(n,t,r){c(n).attachShader(c(t),c(r))}function ee(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindTexture(t>>>0,c(r))}function oe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ie(n,t){c(n).blendEquation(t>>>0)}function _e(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function de(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function ae(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function be(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ge(n,t){c(n).compileShader(c(t))}function we(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function se(n){const t=c(n).createBuffer();return g(t)?0:p(t)}function le(n){const t=c(n).createFramebuffer();return g(t)?0:p(t)}function me(n){const t=c(n).createProgram();return g(t)?0:p(t)}function pe(n){const t=c(n).createRenderbuffer();return g(t)?0:p(t)}function ye(n,t){const r=c(n).createShader(t>>>0);return g(r)?0:p(r)}function he(n){const t=c(n).createTexture();return g(t)?0:p(t)}function ve(n,t){c(n).cullFace(t>>>0)}function xe(n,t){c(n).deleteBuffer(c(t))}function Se(n,t){c(n).deleteFramebuffer(c(t))}function Ae(n,t){c(n).deleteProgram(c(t))}function Te(n,t){c(n).deleteRenderbuffer(c(t))}function Ie(n,t){c(n).deleteShader(c(t))}function Pe(n,t){c(n).deleteTexture(c(t))}function De(n,t){c(n).depthFunc(t>>>0)}function Ee(n,t){c(n).depthMask(0!==t)}function Fe(n,t,r){c(n).depthRange(t,r)}function Be(n,t){c(n).disable(t>>>0)}function Re(n,t){c(n).disableVertexAttribArray(t>>>0)}function Me(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function ke(n,t){c(n).enable(t>>>0)}function Le(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ce(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ve(n,t){c(n).frontFace(t>>>0)}function Ue(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return g(e)?0:p(e)}function je(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function qe(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function We(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ke(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=g(u)?0:b(u,e.__wbindgen_malloc,e.__wbindgen_realloc),i=o;s()[n/4+1]=i,s()[n/4+0]=f}function Ye(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ge(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return g(u)?0:p(u)}function Ne(n,t){c(n).linkProgram(c(t))}function Qe(n,t,r){c(n).pixelStorei(t>>>0,r)}function Xe(n,t,r){c(n).polygonOffset(t,r)}function He(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function ze(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Je(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function Ze(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function $e(n,t){c(n).stencilMask(t>>>0)}function nu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function tu(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ru(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function eu(n,t,r){c(n).uniform1f(c(t),r)}function uu(n,t,r){c(n).uniform1i(c(t),r)}function fu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function cu(n,t){c(n).useProgram(c(t))}function ou(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function iu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function _u(n,t){return p(c(n).fetch(c(t)))}function du(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function au(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function bu(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function gu(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function wu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function su(){return L((function(){return p(new Headers)}),arguments)}function lu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function mu(n){return c(n).matches}function pu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function yu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function hu(n){return c(n).now()}function vu(n){return c(n).deltaX}function xu(n){return c(n).deltaY}function Su(n){return c(n).deltaMode}function Au(n){return c(n).width}function Tu(n){return c(n).height}function Iu(n){const t=c(n).getSupportedProfiles();return g(t)?0:p(t)}function Pu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Eu(n,t){console.error(c(n),c(t))}function Fu(n){console.info(c(n))}function Bu(n){console.log(c(n))}function Ru(n){console.warn(c(n))}function Mu(n){return c(n).charCode}function ku(n){return c(n).keyCode}function Lu(n){return c(n).altKey}function Ou(n){return c(n).ctrlKey}function Cu(n){return c(n).shiftKey}function Vu(n){return c(n).metaKey}function Uu(n,t){const r=b(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function ju(n,t){const r=b(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function qu(n,t,r){return c(n).getModifierState(h(t,r))}function Wu(n){return c(n).matches}function Ku(n){return c(n).pointerId}function Yu(n){return c(n).pressure}function Gu(n,t){const r=b(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function Nu(){return L((function(n,t){const r=b(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}),arguments)}function Qu(n){return c(n).width}function Xu(n,t){c(n).width=t>>>0}function Hu(n){return c(n).height}function zu(n,t){c(n).height=t>>>0}function Ju(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function Zu(n){const t=c(n).target;return g(t)?0:p(t)}function $u(n){return c(n).cancelBubble}function nf(n){c(n).preventDefault()}function tf(n){c(n).stopPropagation()}function rf(n){return c(n).clientX}function ef(n){return c(n).clientY}function uf(n){return c(n).offsetX}function ff(n){return c(n).offsetY}function cf(n){return c(n).ctrlKey}function of(n){return c(n).shiftKey}function _f(n){return c(n).altKey}function df(n){return c(n).metaKey}function af(n){return c(n).button}function bf(n){return c(n).buttons}function gf(n){return c(n).movementX}function wf(n){return c(n).movementY}function sf(n,t){c(n).bindVertexArrayOES(c(t))}function lf(n){const t=c(n).createVertexArrayOES();return g(t)?0:p(t)}function mf(n,t){c(n).deleteVertexArrayOES(c(t))}function pf(n){return c(n).size}function yf(n){return c(n).type}function hf(n,t){const r=b(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function vf(n,t){c(n).drawBuffersWEBGL(c(t))}function xf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Sf(n){return c(n).width}function Af(n,t){c(n).width=t>>>0}function Tf(n){return c(n).height}function If(n,t){c(n).height=t>>>0}function Pf(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return g(u)?0:p(u)}),arguments)}function Df(n){return c(n).videoWidth}function Ef(n){return c(n).videoHeight}function Ff(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Bf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Rf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function Mf(n){return c(n).x}function kf(n){return c(n).y}function Lf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Of(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Cf(n,t){const r=b(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function Vf(n){return c(n).status}function Uf(n){return p(c(n).headers)}function jf(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function qf(){return L((function(n){return p(c(n).text())}),arguments)}function Wf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=b(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=o;s()[n/4+1]=u,s()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,178,S))}function Rc(n,t,r){return p(x(n,t,178,S))}function Mc(n,t,r){return p(x(n,t,178,S))}function kc(n,t,r){return p(x(n,t,178,S))}function Lc(n,t,r){return p(x(n,t,178,S))}function Oc(n,t,r){return p(x(n,t,178,S))}function Cc(n,t,r){return p(x(n,t,178,S))}function Vc(n,t,r){return p(x(n,t,178,A))}function Uc(n,t,r){return p(x(n,t,178,S))}function jc(n,t,r){return p(x(n,t,340,T))}function qc(n,t,r){return p(x(n,t,340,T))}function Wc(n,t,r){return p(x(n,t,340,T))}function Kc(n,t,r){return p(x(n,t,340,T))}function Yc(n,t,r){return p(x(n,t,340,T))}function Gc(n,t,r){return p(x(n,t,340,T))}function Nc(n,t,r){return p(x(n,t,340,T))}function Qc(n,t,r){return p(x(n,t,340,I))}function Xc(n,t,r){return p(x(n,t,340,T))}function Hc(n,t,r){return p(x(n,t,455,P))}function zc(n,t,r){return p(x(n,t,811,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h0409214100dab74d(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h6de39365288f42e8(n,t)}function T(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h3be4c931171520ca(n,t)}function I(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h07c05f94e5c2ba43(n,t,p(r))}function P(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){return p(c(n).getBoundingClientRect())}function hr(){return L((function(n){c(n).requestFullscreen()}),arguments)}function vr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function xr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Sr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Ar(n){const t=c(n).document;return s(t)?0:p(t)}function Tr(n){return p(c(n).location)}function Ir(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Pr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Dr(n){return c(n).devicePixelRatio}function Er(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Fr(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Br(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Mr(n,t){c(n).clearTimeout(t)}function kr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Lr(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Or(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Cr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function Vr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t){return p(c(n).fetch(c(t)))}function qr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Wr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Kr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Yr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Gr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Nr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Qr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function zr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function Jr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Zr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function $r(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function te(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function re(n,t){c(n).activeTexture(t>>>0)}function ee(n,t,r){c(n).attachShader(c(t),c(r))}function ue(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function oe(n,t,r){c(n).bindTexture(t>>>0,c(r))}function ie(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function _e(n,t){c(n).blendEquation(t>>>0)}function de(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ae(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function be(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ge(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function we(n,t){c(n).compileShader(c(t))}function se(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function le(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function me(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function pe(n){const t=c(n).createProgram();return s(t)?0:p(t)}function ye(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function he(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function ve(n){const t=c(n).createTexture();return s(t)?0:p(t)}function xe(n,t){c(n).cullFace(t>>>0)}function Se(n,t){c(n).deleteBuffer(c(t))}function Ae(n,t){c(n).deleteFramebuffer(c(t))}function Te(n,t){c(n).deleteProgram(c(t))}function Ie(n,t){c(n).deleteRenderbuffer(c(t))}function Pe(n,t){c(n).deleteShader(c(t))}function De(n,t){c(n).deleteTexture(c(t))}function Ee(n,t){c(n).depthFunc(t>>>0)}function Fe(n,t){c(n).depthMask(0!==t)}function Be(n,t,r){c(n).depthRange(t,r)}function Re(n,t){c(n).disable(t>>>0)}function Me(n,t){c(n).disableVertexAttribArray(t>>>0)}function ke(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Le(n,t){c(n).enable(t>>>0)}function Oe(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ce(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ve(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ue(n,t){c(n).frontFace(t>>>0)}function je(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function qe(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function We(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ke(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ye(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ge(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ne(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Qe(n,t){c(n).linkProgram(c(t))}function Xe(n,t,r){c(n).pixelStorei(t>>>0,r)}function He(n,t,r){c(n).polygonOffset(t,r)}function ze(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Je(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Ze(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function $e(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function nu(n,t){c(n).stencilMask(t>>>0)}function tu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ru(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function eu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function uu(n,t,r){c(n).uniform1f(c(t),r)}function fu(n,t,r){c(n).uniform1i(c(t),r)}function cu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function ou(n,t){c(n).useProgram(c(t))}function iu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function _u(n,t,r,e,u){c(n).viewport(t,r,e,u)}function du(n){return c(n).charCode}function au(n){return c(n).keyCode}function bu(n){return c(n).altKey}function gu(n){return c(n).ctrlKey}function wu(n){return c(n).shiftKey}function su(n){return c(n).metaKey}function lu(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function mu(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function pu(n,t,r){return c(n).getModifierState(h(t,r))}function yu(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function hu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function vu(n,t){c(n).drawBuffersWEBGL(c(t))}function xu(n){return c(n).x}function Su(n){return c(n).y}function Au(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Tu(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Iu(n){return c(n).status}function Pu(n){return p(c(n).headers)}function Du(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function Eu(){return L((function(n){return p(c(n).text())}),arguments)}function Fu(n){console.debug(c(n))}function Bu(n){console.error(c(n))}function Ru(n,t){console.error(c(n),c(t))}function Mu(n){console.info(c(n))}function ku(n){console.log(c(n))}function Lu(n){console.warn(c(n))}function Ou(){return L((function(){return p(new Headers)}),arguments)}function Cu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function Vu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function Uu(n){return c(n).pointerId}function ju(n){return c(n).pressure}function qu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Wu(n,t){c(n).bindVertexArrayOES(c(t))}function Ku(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function Yu(n,t){c(n).deleteVertexArrayOES(c(t))}function Gu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Nu(n){return c(n).width}function Qu(n,t){c(n).width=t>>>0}function Xu(n){return c(n).height}function Hu(n,t){c(n).height=t>>>0}function zu(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Ju(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function Zu(n){return c(n).width}function $u(n,t){c(n).width=t>>>0}function nf(n){return c(n).height}function tf(n,t){c(n).height=t>>>0}function rf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function ef(n){return c(n).deltaX}function uf(n){return c(n).deltaY}function ff(n){return c(n).deltaMode}function cf(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function of(n){return c(n).width}function _f(n){return c(n).height}function df(n){return c(n).size}function af(n){return c(n).type}function bf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function gf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function wf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function sf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function lf(n){const t=c(n).target;return s(t)?0:p(t)}function mf(n){return c(n).cancelBubble}function pf(n){c(n).preventDefault()}function yf(n){c(n).stopPropagation()}function hf(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function vf(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function xf(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function Sf(n){return c(n).videoWidth}function Af(n){return c(n).videoHeight}function Tf(n){return c(n).clientX}function If(n){return c(n).clientY}function Pf(n){return c(n).offsetX}function Df(n){return c(n).offsetY}function Ef(n){return c(n).ctrlKey}function Ff(n){return c(n).shiftKey}function Bf(n){return c(n).altKey}function Rf(n){return c(n).metaKey}function Mf(n){return c(n).button}function kf(n){return c(n).buttons}function Lf(n){return c(n).movementX}function Of(n){return c(n).movementY}function Cf(n){return c(n).matches}function Vf(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function Uf(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function jf(n){return c(n).matches}function qf(n){return c(n).now()}function Wf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,174,S))}function Rc(n,t,r){return p(x(n,t,174,S))}function Mc(n,t,r){return p(x(n,t,174,S))}function kc(n,t,r){return p(x(n,t,174,S))}function Lc(n,t,r){return p(x(n,t,174,S))}function Oc(n,t,r){return p(x(n,t,174,A))}function Cc(n,t,r){return p(x(n,t,174,S))}function Vc(n,t,r){return p(x(n,t,174,S))}function Uc(n,t,r){return p(x(n,t,174,S))}function jc(n,t,r){return p(x(n,t,267,T))}function qc(n,t,r){return p(x(n,t,267,I))}function Wc(n,t,r){return p(x(n,t,267,I))}function Kc(n,t,r){return p(x(n,t,267,I))}function Yc(n,t,r){return p(x(n,t,267,I))}function Gc(n,t,r){return p(x(n,t,267,I))}function Nc(n,t,r){return p(x(n,t,267,I))}function Qc(n,t,r){return p(x(n,t,267,I))}function Xc(n,t,r){return p(x(n,t,267,I))}function Hc(n,t,r){return p(x(n,t,546,P))}function zc(n,t,r){return p(x(n,t,886,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(0),_=r(1),d=r(9),a=r(8),b=r(91),g=r(94),w=r(12),s=r(95),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(96),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(1),f=r(25),c=r(98),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(0),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h09319e2a21d60d87(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h5ac99132e3049b57(n,t)}function T(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1afc3c6f482d8b79(n,t,p(r))}function I(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h09e6d952d2569625(n,t)}function P(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){return p(c(n).getBoundingClientRect())}function hr(){return L((function(n){c(n).requestFullscreen()}),arguments)}function vr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function xr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Sr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Ar(n){const t=c(n).document;return s(t)?0:p(t)}function Tr(n){return p(c(n).location)}function Ir(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Pr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Dr(n){return c(n).devicePixelRatio}function Er(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Fr(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Br(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Mr(n,t){c(n).clearTimeout(t)}function kr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Lr(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Or(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Cr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function Vr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t){return p(c(n).fetch(c(t)))}function qr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Wr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Kr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Yr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Gr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Nr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Qr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function zr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function Jr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Zr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function $r(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function te(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function re(n,t){c(n).activeTexture(t>>>0)}function ee(n,t,r){c(n).attachShader(c(t),c(r))}function ue(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function oe(n,t,r){c(n).bindTexture(t>>>0,c(r))}function ie(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function _e(n,t){c(n).blendEquation(t>>>0)}function de(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ae(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function be(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ge(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function we(n,t){c(n).compileShader(c(t))}function se(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function le(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function me(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function pe(n){const t=c(n).createProgram();return s(t)?0:p(t)}function ye(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function he(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function ve(n){const t=c(n).createTexture();return s(t)?0:p(t)}function xe(n,t){c(n).cullFace(t>>>0)}function Se(n,t){c(n).deleteBuffer(c(t))}function Ae(n,t){c(n).deleteFramebuffer(c(t))}function Te(n,t){c(n).deleteProgram(c(t))}function Ie(n,t){c(n).deleteRenderbuffer(c(t))}function Pe(n,t){c(n).deleteShader(c(t))}function De(n,t){c(n).deleteTexture(c(t))}function Ee(n,t){c(n).depthFunc(t>>>0)}function Fe(n,t){c(n).depthMask(0!==t)}function Be(n,t,r){c(n).depthRange(t,r)}function Re(n,t){c(n).disable(t>>>0)}function Me(n,t){c(n).disableVertexAttribArray(t>>>0)}function ke(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Le(n,t){c(n).enable(t>>>0)}function Oe(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ce(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ve(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ue(n,t){c(n).frontFace(t>>>0)}function je(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function qe(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function We(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ke(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ye(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ge(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ne(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Qe(n,t){c(n).linkProgram(c(t))}function Xe(n,t,r){c(n).pixelStorei(t>>>0,r)}function He(n,t,r){c(n).polygonOffset(t,r)}function ze(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Je(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Ze(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function $e(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function nu(n,t){c(n).stencilMask(t>>>0)}function tu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ru(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function eu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function uu(n,t,r){c(n).uniform1f(c(t),r)}function fu(n,t,r){c(n).uniform1i(c(t),r)}function cu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function ou(n,t){c(n).useProgram(c(t))}function iu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function _u(n,t,r,e,u){c(n).viewport(t,r,e,u)}function du(n){return c(n).charCode}function au(n){return c(n).keyCode}function bu(n){return c(n).altKey}function gu(n){return c(n).ctrlKey}function wu(n){return c(n).shiftKey}function su(n){return c(n).metaKey}function lu(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function mu(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function pu(n,t,r){return c(n).getModifierState(h(t,r))}function yu(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function hu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function vu(n,t){c(n).drawBuffersWEBGL(c(t))}function xu(n){return c(n).x}function Su(n){return c(n).y}function Au(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Tu(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Iu(n){return c(n).status}function Pu(n){return p(c(n).headers)}function Du(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function Eu(){return L((function(n){return p(c(n).text())}),arguments)}function Fu(n){console.debug(c(n))}function Bu(n){console.error(c(n))}function Ru(n,t){console.error(c(n),c(t))}function Mu(n){console.info(c(n))}function ku(n){console.log(c(n))}function Lu(n){console.warn(c(n))}function Ou(){return L((function(){return p(new Headers)}),arguments)}function Cu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function Vu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function Uu(n){return c(n).pointerId}function ju(n){return c(n).pressure}function qu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Wu(n,t){c(n).bindVertexArrayOES(c(t))}function Ku(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function Yu(n,t){c(n).deleteVertexArrayOES(c(t))}function Gu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Nu(n){return c(n).width}function Qu(n,t){c(n).width=t>>>0}function Xu(n){return c(n).height}function Hu(n,t){c(n).height=t>>>0}function zu(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Ju(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function Zu(n){return c(n).width}function $u(n,t){c(n).width=t>>>0}function nf(n){return c(n).height}function tf(n,t){c(n).height=t>>>0}function rf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function ef(n){return c(n).deltaX}function uf(n){return c(n).deltaY}function ff(n){return c(n).deltaMode}function cf(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function of(n){return c(n).width}function _f(n){return c(n).height}function df(n){return c(n).size}function af(n){return c(n).type}function bf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function gf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function wf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function sf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function lf(n){const t=c(n).target;return s(t)?0:p(t)}function mf(n){return c(n).cancelBubble}function pf(n){c(n).preventDefault()}function yf(n){c(n).stopPropagation()}function hf(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function vf(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function xf(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function Sf(n){return c(n).videoWidth}function Af(n){return c(n).videoHeight}function Tf(n){return c(n).clientX}function If(n){return c(n).clientY}function Pf(n){return c(n).offsetX}function Df(n){return c(n).offsetY}function Ef(n){return c(n).ctrlKey}function Ff(n){return c(n).shiftKey}function Bf(n){return c(n).altKey}function Rf(n){return c(n).metaKey}function Mf(n){return c(n).button}function kf(n){return c(n).buttons}function Lf(n){return c(n).movementX}function Of(n){return c(n).movementY}function Cf(n){return c(n).matches}function Vf(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function Uf(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function jf(n){return c(n).matches}function qf(n){return c(n).now()}function Wf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,206,S))}function Rc(n,t,r){return p(x(n,t,206,S))}function Mc(n,t,r){return p(x(n,t,206,S))}function kc(n,t,r){return p(x(n,t,206,S))}function Lc(n,t,r){return p(x(n,t,206,A))}function Oc(n,t,r){return p(x(n,t,206,S))}function Cc(n,t,r){return p(x(n,t,206,S))}function Vc(n,t,r){return p(x(n,t,206,S))}function Uc(n,t,r){return p(x(n,t,206,S))}function jc(n,t,r){return p(x(n,t,264,T))}function qc(n,t,r){return p(x(n,t,264,T))}function Wc(n,t,r){return p(x(n,t,264,T))}function Kc(n,t,r){return p(x(n,t,264,T))}function Yc(n,t,r){return p(x(n,t,264,T))}function Gc(n,t,r){return p(x(n,t,264,T))}function Nc(n,t,r){return p(x(n,t,264,I))}function Qc(n,t,r){return p(x(n,t,264,T))}function Xc(n,t,r){return p(x(n,t,264,T))}function Hc(n,t,r){return p(x(n,t,563,P))}function zc(n,t,r){return p(x(n,t,903,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(0),_=r(1),d=r(9),a=r(8),b=r(91),g=r(94),w=r(12),s=r(95),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(96),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(1),f=r(25),c=r(98),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(0),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h2fc8892a8133a7b1(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__hec4927d7d27410c5(n,t)}function T(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0d85769282453cd1(n,t,p(r))}function I(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h8e0cd838a36f9d1f(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function W(){return p(new Error)}function q(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function qt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function hr(n){const t=c(n).document;return s(t)?0:p(t)}function vr(n){return p(c(n).location)}function xr(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Sr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Ar(n){return c(n).devicePixelRatio}function Tr(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Ir(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Pr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Dr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Er(n,t){c(n).clearTimeout(t)}function Fr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Br(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Rr(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Mr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function kr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function Lr(n){return p(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Cr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function Vr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Wr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function qr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Kr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Yr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Gr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Qr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Xr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function Hr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function zr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Jr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function Zr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function $r(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function te(n,t){c(n).activeTexture(t>>>0)}function re(n,t,r){c(n).attachShader(c(t),c(r))}function ee(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindTexture(t>>>0,c(r))}function oe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ie(n,t){c(n).blendEquation(t>>>0)}function _e(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function de(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function ae(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function be(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ge(n,t){c(n).compileShader(c(t))}function we(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function se(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function le(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function me(n){const t=c(n).createProgram();return s(t)?0:p(t)}function pe(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function ye(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function he(n){const t=c(n).createTexture();return s(t)?0:p(t)}function ve(n,t){c(n).cullFace(t>>>0)}function xe(n,t){c(n).deleteBuffer(c(t))}function Se(n,t){c(n).deleteFramebuffer(c(t))}function Ae(n,t){c(n).deleteProgram(c(t))}function Te(n,t){c(n).deleteRenderbuffer(c(t))}function Ie(n,t){c(n).deleteShader(c(t))}function Pe(n,t){c(n).deleteTexture(c(t))}function De(n,t){c(n).depthFunc(t>>>0)}function Ee(n,t){c(n).depthMask(0!==t)}function Fe(n,t,r){c(n).depthRange(t,r)}function Be(n,t){c(n).disable(t>>>0)}function Re(n,t){c(n).disableVertexAttribArray(t>>>0)}function Me(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function ke(n,t){c(n).enable(t>>>0)}function Le(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ce(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ve(n,t){c(n).frontFace(t>>>0)}function Ue(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function je(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function We(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function qe(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ke(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ye(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ge(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Ne(n,t){c(n).linkProgram(c(t))}function Qe(n,t,r){c(n).pixelStorei(t>>>0,r)}function Xe(n,t,r){c(n).polygonOffset(t,r)}function He(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function ze(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Je(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function Ze(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function $e(n,t){c(n).stencilMask(t>>>0)}function nu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function tu(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ru(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function eu(n,t,r){c(n).uniform1f(c(t),r)}function uu(n,t,r){c(n).uniform1i(c(t),r)}function fu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function cu(n,t){c(n).useProgram(c(t))}function ou(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function iu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function _u(n,t){return p(c(n).fetch(c(t)))}function du(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function au(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function bu(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function gu(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function wu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function su(){return L((function(){return p(new Headers)}),arguments)}function lu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function mu(n){return c(n).matches}function pu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function yu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function hu(n){return c(n).now()}function vu(n){return c(n).deltaX}function xu(n){return c(n).deltaY}function Su(n){return c(n).deltaMode}function Au(n){return c(n).width}function Tu(n){return c(n).height}function Iu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function Pu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Eu(n,t){console.error(c(n),c(t))}function Fu(n){console.info(c(n))}function Bu(n){console.log(c(n))}function Ru(n){console.warn(c(n))}function Mu(n){return c(n).charCode}function ku(n){return c(n).keyCode}function Lu(n){return c(n).altKey}function Ou(n){return c(n).ctrlKey}function Cu(n){return c(n).shiftKey}function Vu(n){return c(n).metaKey}function Uu(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function ju(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Wu(n,t,r){return c(n).getModifierState(h(t,r))}function qu(n){return c(n).matches}function Ku(n){return c(n).pointerId}function Yu(n){return c(n).pressure}function Gu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Nu(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function Qu(n){return c(n).width}function Xu(n,t){c(n).width=t>>>0}function Hu(n){return c(n).height}function zu(n,t){c(n).height=t>>>0}function Ju(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function Zu(n){const t=c(n).target;return s(t)?0:p(t)}function $u(n){return c(n).cancelBubble}function nf(n){c(n).preventDefault()}function tf(n){c(n).stopPropagation()}function rf(n){return c(n).clientX}function ef(n){return c(n).clientY}function uf(n){return c(n).offsetX}function ff(n){return c(n).offsetY}function cf(n){return c(n).ctrlKey}function of(n){return c(n).shiftKey}function _f(n){return c(n).altKey}function df(n){return c(n).metaKey}function af(n){return c(n).button}function bf(n){return c(n).buttons}function gf(n){return c(n).movementX}function wf(n){return c(n).movementY}function sf(n,t){c(n).bindVertexArrayOES(c(t))}function lf(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function mf(n,t){c(n).deleteVertexArrayOES(c(t))}function pf(n){return c(n).size}function yf(n){return c(n).type}function hf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function vf(n,t){c(n).drawBuffersWEBGL(c(t))}function xf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Sf(n){return c(n).width}function Af(n,t){c(n).width=t>>>0}function Tf(n){return c(n).height}function If(n,t){c(n).height=t>>>0}function Pf(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Df(n){return c(n).videoWidth}function Ef(n){return c(n).videoHeight}function Ff(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Bf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Rf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function Mf(n){return c(n).x}function kf(n){return c(n).y}function Lf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Of(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Cf(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Vf(n){return c(n).status}function Uf(n){return p(c(n).headers)}function jf(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function Wf(){return L((function(n){return p(c(n).text())}),arguments)}function qf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,123,S))}function Rc(n,t,r){return p(x(n,t,123,S))}function Mc(n,t,r){return p(x(n,t,123,S))}function kc(n,t,r){return p(x(n,t,123,A))}function Lc(n,t,r){return p(x(n,t,123,S))}function Oc(n,t,r){return p(x(n,t,123,S))}function Cc(n,t,r){return p(x(n,t,123,S))}function Vc(n,t,r){return p(x(n,t,123,S))}function Uc(n,t,r){return p(x(n,t,123,S))}function jc(n,t,r){return p(x(n,t,233,T))}function Wc(n,t,r){return p(x(n,t,233,I))}function qc(n,t,r){return p(x(n,t,233,T))}function Kc(n,t,r){return p(x(n,t,233,T))}function Yc(n,t,r){return p(x(n,t,233,T))}function Gc(n,t,r){return p(x(n,t,233,T))}function Nc(n,t,r){return p(x(n,t,233,T))}function Qc(n,t,r){return p(x(n,t,233,T))}function Xc(n,t,r){return p(x(n,t,233,T))}function Hc(n,t,r){return p(x(n,t,477,P))}function zc(n,t,r){return p(x(n,t,833,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function l(n){return null==n}let g=null;let w=null;function y(){return null!==w&&0!==w.byteLength||(w=new Int32Array(e.memory.buffer)),w}let p=0;let h=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const v="function"==typeof h.encodeInto?function(n,t){return h.encodeInto(n,t)}:function(n,t){const r=h.encode(n);return t.set(r),{read:n.length,written:r.length}};function m(n,t,r){if(void 0===r){const r=h.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),p=r.length,e}let e=n.length,u=t(e,1)>>>0;const o=b();let c=0;for(;c127)break;o[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=v(n,t).written}return p=c,u}function A(n,t,r,u){const o={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{o.cnt++;const t=o.a;o.a=0;try{return u(t,o.b,...n)}finally{0==--o.cnt?e.__wbindgen_export_2.get(o.dtor)(t,o.b):o.a=t}};return c.original=o,c}function T(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h0336a0c644f7652a(n,t,_(r))}function x(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__ha161aae15ab7d59d(n,t)}function E(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(r))}function I(){e.run()}function R(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function C(n){const t=f(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function O(n){f(n)}function P(n){return _(c(n))}function F(n,t){return _(s(n,t))}function L(){return _(new Error)}function j(n,t){const r=m(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function k(n,t){let r,u;try{r=n,u=t,console.error(s(n,t))}finally{e.__wbindgen_free(r,u,1)}}function M(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==g&&0!==g.byteLength||(g=new Float64Array(e.memory.buffer)),g)[n/8+1]=l(u)?0:u,y()[n/4+0]=!l(u)}function K(n){return _(c(n).getBoundingClientRect())}function B(){return R((function(n){c(n).requestFullscreen()}),arguments)}function Y(){return R((function(n,t,r,e,u){c(n).setAttribute(s(t,r),s(e,u))}),arguments)}function S(){return R((function(n,t){c(n).setPointerCapture(t)}),arguments)}function U(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function D(n){const t=c(n).document;return l(t)?0:_(t)}function W(){return R((function(n){return _(c(n).innerWidth)}),arguments)}function X(){return R((function(n){return _(c(n).innerHeight)}),arguments)}function V(n){return c(n).devicePixelRatio}function q(){return R((function(n,t,r){const e=c(n).matchMedia(s(t,r));return l(e)?0:_(e)}),arguments)}function J(n,t,r){const e=c(n)[s(t,r)];return l(e)?0:_(e)}function N(){return R((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function G(){return R((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function H(n,t){c(n).clearTimeout(t)}function $(){return R((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function z(n){const t=c(n).fullscreenElement;return l(t)?0:_(t)}function Q(){return R((function(n,t,r){return _(c(n).createElement(s(t,r)))}),arguments)}function Z(n,t,r){const e=c(n).getElementById(s(t,r));return l(e)?0:_(e)}function nn(n){return _(c(n).style)}function tn(n){return c(n).charCode}function rn(n){return c(n).keyCode}function en(n){return c(n).altKey}function un(n){return c(n).ctrlKey}function on(n){return c(n).shiftKey}function cn(n){return c(n).metaKey}function fn(n,t){const r=m(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function _n(n,t){const r=m(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function dn(n,t,r){return c(n).getModifierState(s(t,r))}function an(n){return c(n).x}function bn(n){return c(n).y}function sn(n){console.debug(c(n))}function ln(n){console.error(c(n))}function gn(n,t){console.error(c(n),c(t))}function wn(n){console.info(c(n))}function yn(n){console.log(c(n))}function pn(n){console.warn(c(n))}function hn(){return R((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function vn(n){return c(n).pointerId}function mn(n){return c(n).pressure}function An(n,t){const r=m(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function Tn(n){return c(n).width}function xn(n,t){c(n).width=t>>>0}function En(n){return c(n).height}function In(n,t){c(n).height=t>>>0}function Rn(n){return c(n).deltaX}function Cn(n){return c(n).deltaY}function On(n){return c(n).deltaMode}function Pn(){return R((function(n,t,r,e,u){c(n).setProperty(s(t,r),s(e,u))}),arguments)}function Fn(n){const t=c(n).target;return l(t)?0:_(t)}function Ln(n){return c(n).cancelBubble}function jn(n){c(n).preventDefault()}function kn(n){c(n).stopPropagation()}function Mn(){return R((function(n,t,r,e){c(n).addEventListener(s(t,r),c(e))}),arguments)}function Kn(){return R((function(n,t,r,e,u){c(n).addEventListener(s(t,r),c(e),c(u))}),arguments)}function Bn(){return R((function(n,t,r,e,u){c(n).removeEventListener(s(t,r),c(e),c(u))}),arguments)}function Yn(n){return c(n).clientX}function Sn(n){return c(n).clientY}function Un(n){return c(n).offsetX}function Dn(n){return c(n).offsetY}function Wn(n){return c(n).ctrlKey}function Xn(n){return c(n).shiftKey}function Vn(n){return c(n).altKey}function qn(n){return c(n).metaKey}function Jn(n){return c(n).button}function Nn(n){return c(n).buttons}function Gn(n){return c(n).movementX}function Hn(n){return c(n).movementY}function $n(n){return c(n).matches}function zn(){return R((function(n,t){c(n).addListener(c(t))}),arguments)}function Qn(){return R((function(n,t){c(n).removeListener(c(t))}),arguments)}function Zn(n){return c(n).matches}function nt(n){return c(n).now()}function tt(n,t){return _(new Function(s(n,t)))}function rt(){return R((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function et(){return R((function(n,t){return _(c(n).call(c(t)))}),arguments)}function ut(){return _(new Object)}function ot(){return R((function(){return _(self.self)}),arguments)}function ct(){return R((function(){return _(window.window)}),arguments)}function it(){return R((function(){return _(globalThis.globalThis)}),arguments)}function ft(){return R((function(){return _(global.global)}),arguments)}function _t(n){return void 0===c(n)}function dt(n,t){return Object.is(c(n),c(t))}function at(){return R((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function bt(n,t){const r=m(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function st(n,t){throw new Error(s(n,t))}function lt(n,t,r){return _(A(n,t,78,T))}function gt(n,t,r){return _(A(n,t,78,T))}function wt(n,t,r){return _(A(n,t,78,T))}function yt(n,t,r){return _(A(n,t,78,T))}function pt(n,t,r){return _(A(n,t,78,T))}function ht(n,t,r){return _(A(n,t,78,T))}function vt(n,t,r){return _(A(n,t,78,T))}function mt(n,t,r){return _(A(n,t,78,T))}function At(n,t,r){return _(A(n,t,78,x))}function Tt(n,t,r){return _(A(n,t,151,E))}}).call(this,r(262)(n))},259:function(n,t,r){"use strict";var e=r(96),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),o=r(25),c=r(24),i=function(n){var t=1===n;return function(r,i,f){for(var _,d=o(r),a=u(d),b=c(a),s=e(i,f);b-- >0;)if(s(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:i(0),findLastIndex:i(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),o=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=o(n),i=e>=0?e:r+e;return i<0||i>=r?void 0:t[i]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(1),o=r(25),c=r(98),i=r(266),f=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=i?_.getPrototypeOf:function(n){var t=o(n);if(e(t,f))return t[f];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(o(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),o=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:o?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(o(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(0),u=r(29),o=r(257),c=r(24),i=r(272),f=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,s=b&&b.set,l=o.aTypedArray,g=o.exportTypedArrayMethod,w=!_((function(){var n=new Uint8ClampedArray(2);return u(s,n,{length:1,0:3},1),3!==n[1]})),y=w&&o.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));g("set",(function(n){l(this);var t=i(arguments.length>1?arguments[1]:void 0,1),r=f(n);if(w)return u(s,this,r,t);var e=this.length,o=c(r),_=0;if(o+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(o);o>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),o=r(280),c=r(46),i=r(281),f=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=f(this),u=c(n),d=o(r)?i(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),o=RangeError;n.exports=function(n,t,r,c){var i=e(n),f=u(r),_=f<0?i+f:f;if(_>=i||_<0)throw new o("Incorrect index");for(var d=new t(i),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function l(n){return null==n}let g=null;let w=null;function y(){return null!==w&&0!==w.byteLength||(w=new Int32Array(e.memory.buffer)),w}let p=0;let h=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const v="function"==typeof h.encodeInto?function(n,t){return h.encodeInto(n,t)}:function(n,t){const r=h.encode(n);return t.set(r),{read:n.length,written:r.length}};function m(n,t,r){if(void 0===r){const r=h.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),p=r.length,e}let e=n.length,u=t(e,1)>>>0;const o=b();let c=0;for(;c127)break;o[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=v(n,t).written}return p=c,u}function A(n,t,r,u){const o={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{o.cnt++;const t=o.a;o.a=0;try{return u(t,o.b,...n)}finally{0==--o.cnt?e.__wbindgen_export_2.get(o.dtor)(t,o.b):o.a=t}};return c.original=o,c}function T(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h05bf4b1c7c664332(n,t,_(r))}function x(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha5bd28d78a730979(n,t)}function E(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(r))}function R(){e.run()}function C(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function I(n){const t=f(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function O(n){f(n)}function P(n){return _(c(n))}function F(n,t){return _(s(n,t))}function L(){return _(new Error)}function M(n,t){const r=m(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function j(n,t){let r,u;try{r=n,u=t,console.error(s(n,t))}finally{e.__wbindgen_free(r,u,1)}}function k(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==g&&0!==g.byteLength||(g=new Float64Array(e.memory.buffer)),g)[n/8+1]=l(u)?0:u,y()[n/4+0]=!l(u)}function K(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function B(n){const t=c(n).document;return l(t)?0:_(t)}function Y(){return C((function(n){return _(c(n).innerWidth)}),arguments)}function S(){return C((function(n){return _(c(n).innerHeight)}),arguments)}function U(n){return c(n).devicePixelRatio}function W(){return C((function(n,t,r){const e=c(n).matchMedia(s(t,r));return l(e)?0:_(e)}),arguments)}function D(n,t,r){const e=c(n)[s(t,r)];return l(e)?0:_(e)}function X(){return C((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function V(){return C((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function q(n,t){c(n).clearTimeout(t)}function J(){return C((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function N(n){const t=c(n).fullscreenElement;return l(t)?0:_(t)}function G(){return C((function(n,t,r){return _(c(n).createElement(s(t,r)))}),arguments)}function H(n,t,r){const e=c(n).getElementById(s(t,r));return l(e)?0:_(e)}function $(n){return _(c(n).getBoundingClientRect())}function z(){return C((function(n){c(n).requestFullscreen()}),arguments)}function Q(){return C((function(n,t,r,e,u){c(n).setAttribute(s(t,r),s(e,u))}),arguments)}function Z(){return C((function(n,t){c(n).setPointerCapture(t)}),arguments)}function nn(n){return _(c(n).style)}function tn(){return C((function(n,t,r,e,u){c(n).setProperty(s(t,r),s(e,u))}),arguments)}function rn(){return C((function(n,t,r,e){c(n).addEventListener(s(t,r),c(e))}),arguments)}function en(){return C((function(n,t,r,e,u){c(n).addEventListener(s(t,r),c(e),c(u))}),arguments)}function un(){return C((function(n,t,r,e,u){c(n).removeEventListener(s(t,r),c(e),c(u))}),arguments)}function on(){return C((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function cn(n){return c(n).matches}function fn(){return C((function(n,t){c(n).addListener(c(t))}),arguments)}function _n(){return C((function(n,t){c(n).removeListener(c(t))}),arguments)}function dn(n){return c(n).now()}function an(n){return c(n).deltaX}function bn(n){return c(n).deltaY}function sn(n){return c(n).deltaMode}function ln(n){console.debug(c(n))}function gn(n){console.error(c(n))}function wn(n,t){console.error(c(n),c(t))}function yn(n){console.info(c(n))}function pn(n){console.log(c(n))}function hn(n){console.warn(c(n))}function vn(n){return c(n).charCode}function mn(n){return c(n).keyCode}function An(n){return c(n).altKey}function Tn(n){return c(n).ctrlKey}function xn(n){return c(n).shiftKey}function En(n){return c(n).metaKey}function Rn(n,t){const r=m(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function Cn(n,t){const r=m(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function In(n,t,r){return c(n).getModifierState(s(t,r))}function On(n){return c(n).matches}function Pn(n){return c(n).pointerId}function Fn(n){return c(n).pressure}function Ln(n,t){const r=m(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function Mn(n){const t=c(n).target;return l(t)?0:_(t)}function jn(n){return c(n).cancelBubble}function kn(n){c(n).preventDefault()}function Kn(n){c(n).stopPropagation()}function Bn(n){return c(n).clientX}function Yn(n){return c(n).clientY}function Sn(n){return c(n).offsetX}function Un(n){return c(n).offsetY}function Wn(n){return c(n).ctrlKey}function Dn(n){return c(n).shiftKey}function Xn(n){return c(n).altKey}function Vn(n){return c(n).metaKey}function qn(n){return c(n).button}function Jn(n){return c(n).buttons}function Nn(n){return c(n).movementX}function Gn(n){return c(n).movementY}function Hn(n){return c(n).width}function $n(n,t){c(n).width=t>>>0}function zn(n){return c(n).height}function Qn(n,t){c(n).height=t>>>0}function Zn(n){return c(n).x}function nt(n){return c(n).y}function tt(n,t){return _(new Function(s(n,t)))}function rt(){return C((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function et(){return C((function(n,t){return _(c(n).call(c(t)))}),arguments)}function ut(){return _(new Object)}function ot(){return C((function(){return _(self.self)}),arguments)}function ct(){return C((function(){return _(window.window)}),arguments)}function it(){return C((function(){return _(globalThis.globalThis)}),arguments)}function ft(){return C((function(){return _(global.global)}),arguments)}function _t(n){return void 0===c(n)}function dt(n,t){return Object.is(c(n),c(t))}function at(){return C((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function bt(n,t){const r=m(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;y()[n/4+1]=u,y()[n/4+0]=r}function st(n,t){throw new Error(s(n,t))}function lt(n,t,r){return _(A(n,t,7,T))}function gt(n,t,r){return _(A(n,t,7,T))}function wt(n,t,r){return _(A(n,t,7,T))}function yt(n,t,r){return _(A(n,t,7,T))}function pt(n,t,r){return _(A(n,t,7,x))}function ht(n,t,r){return _(A(n,t,7,T))}function vt(n,t,r){return _(A(n,t,7,T))}function mt(n,t,r){return _(A(n,t,7,T))}function At(n,t,r){return _(A(n,t,7,T))}function Tt(n,t,r){return _(A(n,t,148,E))}}).call(this,r(262)(n))},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),o=r(25),c=r(24),i=function(n){var t=1===n;return function(r,i,f){for(var _,d=o(r),a=u(d),b=c(a),s=e(i,f);b-- >0;)if(s(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:i(0),findLastIndex:i(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),o=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=o(n),i=e>=0?e:r+e;return i<0||i>=r?void 0:t[i]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),o=r(25),c=r(99),i=r(266),f=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=i?_.getPrototypeOf:function(n){var t=o(n);if(e(t,f))return t[f];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(o(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),o=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:o?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(o(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),o=r(257),c=r(24),i=r(272),f=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,s=b&&b.set,l=o.aTypedArray,g=o.exportTypedArrayMethod,w=!_((function(){var n=new Uint8ClampedArray(2);return u(s,n,{length:1,0:3},1),3!==n[1]})),y=w&&o.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));g("set",(function(n){l(this);var t=i(arguments.length>1?arguments[1]:void 0,1),r=f(n);if(w)return u(s,this,r,t);var e=this.length,o=c(r),_=0;if(o+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(o);o>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),o=r(280),c=r(46),i=r(281),f=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=f(this),u=c(n),d=o(r)?i(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),o=RangeError;n.exports=function(n,t,r,c){var i=e(n),f=u(r),_=f<0?i+f:f;if(_>=i||_<0)throw new o("Incorrect index");for(var d=new t(i),a=0;a>>=0,d.decode(b().subarray(n,n+t))}let w=0;let s=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const l="function"==typeof s.encodeInto?function(n,t){return s.encodeInto(n,t)}:function(n,t){const r=s.encode(n);return t.set(r),{read:n.length,written:r.length}};function m(n,t,r){if(void 0===r){const r=s.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),w=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=l(n,t).written}return w=c,u}function p(n){return null==n}let y=null;function h(){return null!==y&&0!==y.byteLength||(y=new Int32Array(e.memory.buffer)),y}let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h032434927d32e717(n,t,_(r))}function A(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h673492e2934780c2(n,t)}function T(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h11d76b087799dd06(n,t,_(r))}function I(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h8f60dd7f5c912207(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,_(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(r))}function E(){e.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,h().subarray(n/4,n/4+t)}let M=null;function O(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const r=m(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function q(n,t){let r,u;try{r=n,u=t,console.error(g(n,t))}finally{e.__wbindgen_free(r,u,1)}}function K(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Y(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=p(u)?0:u,h()[n/4+0]=!p(u)}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,r){c(n).beginQuery(t>>>0,c(r))}function H(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function tn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function rn(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function en(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,R(e,u))}function un(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,O(e,u))}function cn(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function on(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function _n(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function dn(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function an(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function gn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return p(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return p(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return p(e)?0:_(e)}function In(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Pn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function Dn(){return L((function(n,t,r){return _(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function En(n,t,r){return _(c(n).getSyncParameter(c(t),r>>>0))}function Fn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),g(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function On(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function Ln(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function kn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Cn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Vn(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function Un(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function zn(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function et(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function ut(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function ct(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function ot(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,r){c(n).attachShader(c(t),c(r))}function dt(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function at(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function wt(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function mt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function pt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function yt(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function At(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function It(n,t){const r=c(n).createShader(t>>>0);return p(r)?0:_(r)}function Pt(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Ot(n,t){c(n).deleteTexture(c(t))}function Lt(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,r){c(n).depthRange(t,r)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Yt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return p(e)?0:_(e)}function Qt(){return L((function(n,t,r){const e=c(n).getExtension(g(t,r));return p(e)?0:_(e)}),arguments)}function Xt(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Jt(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Zt(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function nr(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return p(u)?0:_(u)}function tr(n,t){c(n).linkProgram(c(t))}function rr(n,t,r){c(n).pixelStorei(t>>>0,r)}function er(n,t,r){c(n).polygonOffset(t,r)}function ur(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function fr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function cr(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function or(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ir(n,t){c(n).stencilMask(t>>>0)}function _r(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function dr(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ar(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function br(n,t,r){c(n).uniform1f(c(t),r)}function gr(n,t,r){c(n).uniform1i(c(t),r)}function wr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function sr(n,t){c(n).useProgram(c(t))}function lr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function mr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function pr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function yr(n){const t=c(n).document;return p(t)?0:_(t)}function hr(){return L((function(n){return _(c(n).innerWidth)}),arguments)}function vr(){return L((function(n){return _(c(n).innerHeight)}),arguments)}function xr(n){return c(n).devicePixelRatio}function Sr(){return L((function(n,t,r){const e=c(n).matchMedia(g(t,r));return p(e)?0:_(e)}),arguments)}function Ar(n,t,r){const e=c(n)[g(t,r)];return p(e)?0:_(e)}function Tr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ir(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Pr(n,t){c(n).clearTimeout(t)}function Dr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Er(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function Fr(){return L((function(n,t,r){return _(c(n).createElement(g(t,r)))}),arguments)}function Rr(n,t,r){const e=c(n).getElementById(g(t,r));return p(e)?0:_(e)}function Br(){return L((function(n,t,r){const e=c(n).querySelector(g(t,r));return p(e)?0:_(e)}),arguments)}function Mr(n){return _(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Lr(){return L((function(n,t,r,e,u){c(n).setAttribute(g(t,r),g(e,u))}),arguments)}function kr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Cr(n){return _(c(n).style)}function Vr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Ur(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function jr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function qr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Kr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yr(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function Gr(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Nr(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function Qr(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function Jr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function zr(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function Zr(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function $r(n,t){c(n).activeTexture(t>>>0)}function ne(n,t,r){c(n).attachShader(c(t),c(r))}function te(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function re(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ee(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindTexture(t>>>0,c(r))}function fe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ce(n,t){c(n).blendEquation(t>>>0)}function oe(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ie(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function _e(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function de(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ae(n,t){c(n).compileShader(c(t))}function be(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function ge(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function we(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function se(n){const t=c(n).createProgram();return p(t)?0:_(t)}function le(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function me(n,t){const r=c(n).createShader(t>>>0);return p(r)?0:_(r)}function pe(n){const t=c(n).createTexture();return p(t)?0:_(t)}function ye(n,t){c(n).cullFace(t>>>0)}function he(n,t){c(n).deleteBuffer(c(t))}function ve(n,t){c(n).deleteFramebuffer(c(t))}function xe(n,t){c(n).deleteProgram(c(t))}function Se(n,t){c(n).deleteRenderbuffer(c(t))}function Ae(n,t){c(n).deleteShader(c(t))}function Te(n,t){c(n).deleteTexture(c(t))}function Ie(n,t){c(n).depthFunc(t>>>0)}function Pe(n,t){c(n).depthMask(0!==t)}function De(n,t,r){c(n).depthRange(t,r)}function Ee(n,t){c(n).disable(t>>>0)}function Fe(n,t){c(n).disableVertexAttribArray(t>>>0)}function Re(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Be(n,t){c(n).enable(t>>>0)}function Me(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Le(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function ke(n,t){c(n).frontFace(t>>>0)}function Ce(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return p(e)?0:_(e)}function Ve(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ue(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function We(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function je(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function qe(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function Ke(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return p(u)?0:_(u)}function Ye(n,t){c(n).linkProgram(c(t))}function Ge(n,t,r){c(n).pixelStorei(t>>>0,r)}function Ne(n,t,r){c(n).polygonOffset(t,r)}function Qe(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Xe(n,t,r,e,u){c(n).scissor(t,r,e,u)}function He(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function Je(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ze(n,t){c(n).stencilMask(t>>>0)}function Ze(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function $e(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function nu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function tu(n,t,r){c(n).uniform1f(c(t),r)}function ru(n,t,r){c(n).uniform1i(c(t),r)}function eu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function cu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function ou(){return L((function(n,t,r,e,u){c(n).setProperty(g(t,r),g(e,u))}),arguments)}function iu(){return L((function(n,t,r,e){c(n).addEventListener(g(t,r),c(e))}),arguments)}function _u(){return L((function(n,t,r,e,u){c(n).addEventListener(g(t,r),c(e),c(u))}),arguments)}function du(){return L((function(n,t,r,e,u){c(n).removeEventListener(g(t,r),c(e),c(u))}),arguments)}function au(){return L((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function bu(n){return c(n).matches}function gu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function wu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function su(n){return c(n).now()}function lu(n){return c(n).deltaX}function mu(n){return c(n).deltaY}function pu(n){return c(n).deltaMode}function yu(n){return c(n).width}function hu(n){return c(n).height}function vu(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function xu(n){console.debug(c(n))}function Su(n){console.error(c(n))}function Au(n,t){console.error(c(n),c(t))}function Tu(n){console.info(c(n))}function Iu(n){console.log(c(n))}function Pu(n){console.warn(c(n))}function Du(n){return c(n).charCode}function Eu(n){return c(n).keyCode}function Fu(n){return c(n).altKey}function Ru(n){return c(n).ctrlKey}function Bu(n){return c(n).shiftKey}function Mu(n){return c(n).metaKey}function Ou(n,t){const r=m(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function Lu(n,t){const r=m(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function ku(n,t,r){return c(n).getModifierState(g(t,r))}function Cu(n){return c(n).matches}function Vu(n){return c(n).pointerId}function Uu(n){return c(n).pressure}function Wu(n,t){const r=m(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function ju(n){return c(n).width}function qu(n,t){c(n).width=t>>>0}function Ku(n){return c(n).height}function Yu(n,t){c(n).height=t>>>0}function Gu(n){const t=c(n).target;return p(t)?0:_(t)}function Nu(n){return c(n).cancelBubble}function Qu(n){c(n).preventDefault()}function Xu(n){c(n).stopPropagation()}function Hu(n){return c(n).clientX}function Ju(n){return c(n).clientY}function zu(n){return c(n).offsetX}function Zu(n){return c(n).offsetY}function $u(n){return c(n).ctrlKey}function nf(n){return c(n).shiftKey}function tf(n){return c(n).altKey}function rf(n){return c(n).metaKey}function ef(n){return c(n).button}function uf(n){return c(n).buttons}function ff(n){return c(n).movementX}function cf(n){return c(n).movementY}function of(n,t){c(n).bindVertexArrayOES(c(t))}function _f(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function df(n,t){c(n).deleteVertexArrayOES(c(t))}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const r=m(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function wf(n,t){c(n).drawBuffersWEBGL(c(t))}function sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function lf(n){return c(n).width}function mf(n,t){c(n).width=t>>>0}function pf(n){return c(n).height}function yf(n,t){c(n).height=t>>>0}function hf(){return L((function(n,t,r,e){const u=c(n).getContext(g(t,r),c(e));return p(u)?0:_(u)}),arguments)}function vf(n){return c(n).videoWidth}function xf(n){return c(n).videoHeight}function Sf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Af(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Tf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function If(n){return c(n).x}function Pf(n){return c(n).y}function Df(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return L((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Of(){return L((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Lf(){return _(new Object)}function kf(){return L((function(){return _(self.self)}),arguments)}function Cf(){return L((function(){return _(window.window)}),arguments)}function Vf(){return L((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,r){return c(n).includes(c(t),r)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,r){return _(new Int8Array(c(n),t>>>0,r>>>0))}function Hf(n,t,r){return _(new Int16Array(c(n),t>>>0,r>>>0))}function Jf(n,t,r){return _(new Int32Array(c(n),t>>>0,r>>>0))}function zf(n,t,r){return _(new Uint8Array(c(n),t>>>0,r>>>0))}function Zf(n,t,r){return _(new Uint16Array(c(n),t>>>0,r>>>0))}function $f(n,t,r){return _(new Uint32Array(c(n),t>>>0,r>>>0))}function nc(n,t,r){return _(new Float32Array(c(n),t>>>0,r>>>0))}function tc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function rc(n,t){const r=m(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function ec(n,t){throw new Error(g(n,t))}function uc(){return _(e.memory)}function fc(n,t,r){return _(x(n,t,74,S))}function cc(n,t,r){return _(x(n,t,74,S))}function oc(n,t,r){return _(x(n,t,74,S))}function ic(n,t,r){return _(x(n,t,74,S))}function _c(n,t,r){return _(x(n,t,74,A))}function dc(n,t,r){return _(x(n,t,74,S))}function ac(n,t,r){return _(x(n,t,74,S))}function bc(n,t,r){return _(x(n,t,74,S))}function gc(n,t,r){return _(x(n,t,74,S))}function wc(n,t,r){return _(x(n,t,155,T))}function sc(n,t,r){return _(x(n,t,155,T))}function lc(n,t,r){return _(x(n,t,155,I))}function mc(n,t,r){return _(x(n,t,155,T))}function pc(n,t,r){return _(x(n,t,155,T))}function yc(n,t,r){return _(x(n,t,155,T))}function hc(n,t,r){return _(x(n,t,155,T))}function vc(n,t,r){return _(x(n,t,155,T))}function xc(n,t,r){return _(x(n,t,155,T))}function Sc(n,t,r){return _(x(n,t,273,P))}function Ac(n,t,r){return _(x(n,t,1769,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),O=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===R)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[O]:void 0}}),C)i[e]&&w(i[e],O,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:k&&O,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}let w=0;let s=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const l="function"==typeof s.encodeInto?function(n,t){return s.encodeInto(n,t)}:function(n,t){const e=s.encode(n);return t.set(e),{read:n.length,written:e.length}};function m(n,t,e){if(void 0===e){const e=s.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),w=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=l(n,t).written}return w=c,u}function p(n){return null==n}let y=null;function h(){return null!==y&&0!==y.byteLength||(y=new Int32Array(r.memory.buffer)),y}let v=null;function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h362261d2ee72077c(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9825c0e2d127125c(n,t)}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h49696a9cfab9b287(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9032436a0a63e951(n,t)}function P(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(e))}function E(){r.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,h().subarray(n/4,n/4+t)}let M=null;function L(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Y(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function G(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(r.memory.buffer)),v)[n/8+1]=p(u)?0:u,h()[n/4+0]=!p(u)}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,R(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,B(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,L(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return p(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return p(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Rn(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function kn(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function At(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return p(r)?0:_(r)}function Qt(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function Xt(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){return _(c(n).getBoundingClientRect())}function ye(){return O((function(n){c(n).requestFullscreen()}),arguments)}function he(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ve(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function xe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Se(n){const t=c(n).document;return p(t)?0:_(t)}function Ae(){return O((function(n){return _(c(n).innerWidth)}),arguments)}function Te(){return O((function(n){return _(c(n).innerHeight)}),arguments)}function Ie(n){return c(n).devicePixelRatio}function Pe(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function De(n,t,e){const r=c(n)[g(t,e)];return p(r)?0:_(r)}function Ee(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Fe(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Re(n,t){c(n).clearTimeout(t)}function Be(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Me(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function Le(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function Oe(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function ke(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return p(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return p(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Rr(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Br(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Lr(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Or(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function kr(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return p(r)?0:_(r)}function Vr(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(n){return c(n).charCode}function iu(n){return c(n).keyCode}function _u(n){return c(n).altKey}function du(n){return c(n).ctrlKey}function au(n){return c(n).shiftKey}function bu(n){return c(n).metaKey}function gu(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function wu(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function su(n,t,e){return c(n).getModifierState(g(t,e))}function lu(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function mu(n,t){c(n).drawBuffersWEBGL(c(t))}function pu(n){return c(n).x}function yu(n){return c(n).y}function hu(n){console.debug(c(n))}function vu(n){console.error(c(n))}function xu(n,t){console.error(c(n),c(t))}function Su(n){console.info(c(n))}function Au(n){console.log(c(n))}function Tu(n){console.warn(c(n))}function Iu(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Pu(n){return c(n).pointerId}function Du(n){return c(n).pressure}function Eu(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function Fu(n,t){c(n).bindVertexArrayOES(c(t))}function Ru(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function Bu(n,t){c(n).deleteVertexArrayOES(c(t))}function Mu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Lu(n){return c(n).width}function Ou(n,t){c(n).width=t>>>0}function ku(n){return c(n).height}function Cu(n,t){c(n).height=t>>>0}function Vu(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Uu(n){return c(n).width}function Wu(n,t){c(n).width=t>>>0}function ju(n){return c(n).height}function qu(n,t){c(n).height=t>>>0}function Ku(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Yu(n){return c(n).deltaX}function Gu(n){return c(n).deltaY}function Nu(n){return c(n).deltaMode}function Qu(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Xu(n){return c(n).width}function Hu(n){return c(n).height}function Ju(n){return c(n).size}function zu(n){return c(n).type}function Zu(n,t){const e=m(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function $u(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function nf(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function ef(n){const t=c(n).target;return p(t)?0:_(t)}function rf(n){return c(n).cancelBubble}function uf(n){c(n).preventDefault()}function ff(n){c(n).stopPropagation()}function cf(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function of(){return O((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function _f(){return O((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function df(n){return c(n).videoWidth}function af(n){return c(n).videoHeight}function bf(n){return c(n).clientX}function gf(n){return c(n).clientY}function wf(n){return c(n).offsetX}function sf(n){return c(n).offsetY}function lf(n){return c(n).ctrlKey}function mf(n){return c(n).shiftKey}function pf(n){return c(n).altKey}function yf(n){return c(n).metaKey}function hf(n){return c(n).button}function vf(n){return c(n).buttons}function xf(n){return c(n).movementX}function Sf(n){return c(n).movementY}function Af(n){return c(n).matches}function Tf(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function If(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Pf(n){return c(n).matches}function Df(n){return c(n).now()}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return O((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Lf(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Of(){return _(new Object)}function kf(){return O((function(){return _(self.self)}),arguments)}function Cf(){return O((function(){return _(window.window)}),arguments)}function Vf(){return O((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return O((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=m(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,81,S))}function cc(n,t,e){return _(x(n,t,81,S))}function oc(n,t,e){return _(x(n,t,81,S))}function ic(n,t,e){return _(x(n,t,81,S))}function _c(n,t,e){return _(x(n,t,81,S))}function dc(n,t,e){return _(x(n,t,81,S))}function ac(n,t,e){return _(x(n,t,81,S))}function bc(n,t,e){return _(x(n,t,81,A))}function gc(n,t,e){return _(x(n,t,81,S))}function wc(n,t,e){return _(x(n,t,188,T))}function sc(n,t,e){return _(x(n,t,188,T))}function lc(n,t,e){return _(x(n,t,188,T))}function mc(n,t,e){return _(x(n,t,188,T))}function pc(n,t,e){return _(x(n,t,188,T))}function yc(n,t,e){return _(x(n,t,188,T))}function hc(n,t,e){return _(x(n,t,188,T))}function vc(n,t,e){return _(x(n,t,188,I))}function xc(n,t,e){return _(x(n,t,188,T))}function Sc(n,t,e){return _(x(n,t,321,P))}function Ac(n,t,e){return _(x(n,t,2334,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(0),_=e(1),d=e(9),a=e(8),b=e(91),g=e(94),w=e(12),s=e(95),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),L=v("TYPED_ARRAY_TAG"),O=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:O=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!O||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},O))for(r in C)i[r]&&y(i[r],E);if((!O||!F||F===R)&&(F=E.prototype,O))for(r in C)i[r]&&y(i[r].prototype,F);if(O&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[L]:void 0}}),C)i[r]&&w(i[r],L,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:O,TYPED_ARRAY_TAG:k&&L,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:O&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:O&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(96),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(1),f=e(25),c=e(98),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(0),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}let w=0;let s=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const l="function"==typeof s.encodeInto?function(n,t){return s.encodeInto(n,t)}:function(n,t){const r=s.encode(n);return t.set(r),{read:n.length,written:r.length}};function m(n,t,r){if(void 0===r){const r=s.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),w=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=l(n,t).written}return w=c,u}function p(n){return null==n}let y=null;function h(){return null!==y&&0!==y.byteLength||(y=new Int32Array(e.memory.buffer)),y}let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2a3a7fd36bf8a0e4(n,t,_(r))}function A(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h98d8887efaf27983(n,t)}function T(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h32abbe9dd75b4051(n,t)}function I(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h230a98b0004a97f1(n,t,_(r))}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,_(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(r))}function E(){e.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,h().subarray(n/4,n/4+t)}let M=null;function O(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const r=m(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function q(n,t){let r,u;try{r=n,u=t,console.error(g(n,t))}finally{e.__wbindgen_free(r,u,1)}}function K(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Y(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=p(u)?0:u,h()[n/4+0]=!p(u)}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,r){c(n).beginQuery(t>>>0,c(r))}function H(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function tn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function rn(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function en(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,R(e,u))}function un(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,O(e,u))}function cn(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function on(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function _n(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function dn(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function an(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function gn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return p(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return p(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return p(e)?0:_(e)}function In(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Pn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function Dn(){return L((function(n,t,r){return _(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function En(n,t,r){return _(c(n).getSyncParameter(c(t),r>>>0))}function Fn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),g(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function On(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function Ln(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function kn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Cn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Vn(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function Un(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function zn(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function et(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function ut(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function ct(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function ot(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,r){c(n).attachShader(c(t),c(r))}function dt(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function at(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function wt(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function mt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function pt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function yt(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function At(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function It(n,t){const r=c(n).createShader(t>>>0);return p(r)?0:_(r)}function Pt(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Ot(n,t){c(n).deleteTexture(c(t))}function Lt(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,r){c(n).depthRange(t,r)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Yt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return p(e)?0:_(e)}function Qt(){return L((function(n,t,r){const e=c(n).getExtension(g(t,r));return p(e)?0:_(e)}),arguments)}function Xt(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Jt(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Zt(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function nr(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return p(u)?0:_(u)}function tr(n,t){c(n).linkProgram(c(t))}function rr(n,t,r){c(n).pixelStorei(t>>>0,r)}function er(n,t,r){c(n).polygonOffset(t,r)}function ur(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function fr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function cr(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function or(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ir(n,t){c(n).stencilMask(t>>>0)}function _r(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function dr(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ar(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function br(n,t,r){c(n).uniform1f(c(t),r)}function gr(n,t,r){c(n).uniform1i(c(t),r)}function wr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function sr(n,t){c(n).useProgram(c(t))}function lr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function mr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function pr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function yr(n){const t=c(n).document;return p(t)?0:_(t)}function hr(){return L((function(n){return _(c(n).innerWidth)}),arguments)}function vr(){return L((function(n){return _(c(n).innerHeight)}),arguments)}function xr(n){return c(n).devicePixelRatio}function Sr(){return L((function(n,t,r){const e=c(n).matchMedia(g(t,r));return p(e)?0:_(e)}),arguments)}function Ar(n,t,r){const e=c(n)[g(t,r)];return p(e)?0:_(e)}function Tr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ir(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Pr(n,t){c(n).clearTimeout(t)}function Dr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Er(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function Fr(){return L((function(n,t,r){return _(c(n).createElement(g(t,r)))}),arguments)}function Rr(n,t,r){const e=c(n).getElementById(g(t,r));return p(e)?0:_(e)}function Br(){return L((function(n,t,r){const e=c(n).querySelector(g(t,r));return p(e)?0:_(e)}),arguments)}function Mr(n){return _(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Lr(){return L((function(n,t,r,e,u){c(n).setAttribute(g(t,r),g(e,u))}),arguments)}function kr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Cr(n){return _(c(n).style)}function Vr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Ur(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function jr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function qr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Kr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yr(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function Gr(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Nr(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function Qr(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function Jr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function zr(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function Zr(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function $r(n,t){c(n).activeTexture(t>>>0)}function ne(n,t,r){c(n).attachShader(c(t),c(r))}function te(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function re(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ee(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindTexture(t>>>0,c(r))}function fe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ce(n,t){c(n).blendEquation(t>>>0)}function oe(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ie(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function _e(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function de(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ae(n,t){c(n).compileShader(c(t))}function be(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function ge(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function we(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function se(n){const t=c(n).createProgram();return p(t)?0:_(t)}function le(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function me(n,t){const r=c(n).createShader(t>>>0);return p(r)?0:_(r)}function pe(n){const t=c(n).createTexture();return p(t)?0:_(t)}function ye(n,t){c(n).cullFace(t>>>0)}function he(n,t){c(n).deleteBuffer(c(t))}function ve(n,t){c(n).deleteFramebuffer(c(t))}function xe(n,t){c(n).deleteProgram(c(t))}function Se(n,t){c(n).deleteRenderbuffer(c(t))}function Ae(n,t){c(n).deleteShader(c(t))}function Te(n,t){c(n).deleteTexture(c(t))}function Ie(n,t){c(n).depthFunc(t>>>0)}function Pe(n,t){c(n).depthMask(0!==t)}function De(n,t,r){c(n).depthRange(t,r)}function Ee(n,t){c(n).disable(t>>>0)}function Fe(n,t){c(n).disableVertexAttribArray(t>>>0)}function Re(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Be(n,t){c(n).enable(t>>>0)}function Me(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Le(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function ke(n,t){c(n).frontFace(t>>>0)}function Ce(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return p(e)?0:_(e)}function Ve(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ue(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function We(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function je(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=p(u)?0:m(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function qe(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function Ke(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return p(u)?0:_(u)}function Ye(n,t){c(n).linkProgram(c(t))}function Ge(n,t,r){c(n).pixelStorei(t>>>0,r)}function Ne(n,t,r){c(n).polygonOffset(t,r)}function Qe(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Xe(n,t,r,e,u){c(n).scissor(t,r,e,u)}function He(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function Je(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ze(n,t){c(n).stencilMask(t>>>0)}function Ze(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function $e(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function nu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function tu(n,t,r){c(n).uniform1f(c(t),r)}function ru(n,t,r){c(n).uniform1i(c(t),r)}function eu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function cu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function ou(){return L((function(n,t,r,e,u){c(n).setProperty(g(t,r),g(e,u))}),arguments)}function iu(){return L((function(n,t,r,e){c(n).addEventListener(g(t,r),c(e))}),arguments)}function _u(){return L((function(n,t,r,e,u){c(n).addEventListener(g(t,r),c(e),c(u))}),arguments)}function du(){return L((function(n,t,r,e,u){c(n).removeEventListener(g(t,r),c(e),c(u))}),arguments)}function au(){return L((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function bu(n){return c(n).matches}function gu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function wu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function su(n){return c(n).now()}function lu(n){return c(n).deltaX}function mu(n){return c(n).deltaY}function pu(n){return c(n).deltaMode}function yu(n){return c(n).width}function hu(n){return c(n).height}function vu(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function xu(n){console.debug(c(n))}function Su(n){console.error(c(n))}function Au(n,t){console.error(c(n),c(t))}function Tu(n){console.info(c(n))}function Iu(n){console.log(c(n))}function Pu(n){console.warn(c(n))}function Du(n){return c(n).charCode}function Eu(n){return c(n).keyCode}function Fu(n){return c(n).altKey}function Ru(n){return c(n).ctrlKey}function Bu(n){return c(n).shiftKey}function Mu(n){return c(n).metaKey}function Ou(n,t){const r=m(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function Lu(n,t){const r=m(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function ku(n,t,r){return c(n).getModifierState(g(t,r))}function Cu(n){return c(n).matches}function Vu(n){return c(n).pointerId}function Uu(n){return c(n).pressure}function Wu(n,t){const r=m(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function ju(n){return c(n).width}function qu(n,t){c(n).width=t>>>0}function Ku(n){return c(n).height}function Yu(n,t){c(n).height=t>>>0}function Gu(n){const t=c(n).target;return p(t)?0:_(t)}function Nu(n){return c(n).cancelBubble}function Qu(n){c(n).preventDefault()}function Xu(n){c(n).stopPropagation()}function Hu(n){return c(n).clientX}function Ju(n){return c(n).clientY}function zu(n){return c(n).offsetX}function Zu(n){return c(n).offsetY}function $u(n){return c(n).ctrlKey}function nf(n){return c(n).shiftKey}function tf(n){return c(n).altKey}function rf(n){return c(n).metaKey}function ef(n){return c(n).button}function uf(n){return c(n).buttons}function ff(n){return c(n).movementX}function cf(n){return c(n).movementY}function of(n,t){c(n).bindVertexArrayOES(c(t))}function _f(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function df(n,t){c(n).deleteVertexArrayOES(c(t))}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const r=m(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function wf(n,t){c(n).drawBuffersWEBGL(c(t))}function sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function lf(n){return c(n).width}function mf(n,t){c(n).width=t>>>0}function pf(n){return c(n).height}function yf(n,t){c(n).height=t>>>0}function hf(){return L((function(n,t,r,e){const u=c(n).getContext(g(t,r),c(e));return p(u)?0:_(u)}),arguments)}function vf(n){return c(n).videoWidth}function xf(n){return c(n).videoHeight}function Sf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Af(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Tf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function If(n){return c(n).x}function Pf(n){return c(n).y}function Df(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return L((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Of(){return L((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Lf(){return _(new Object)}function kf(){return L((function(){return _(self.self)}),arguments)}function Cf(){return L((function(){return _(window.window)}),arguments)}function Vf(){return L((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,r){return c(n).includes(c(t),r)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,r){return _(new Int8Array(c(n),t>>>0,r>>>0))}function Hf(n,t,r){return _(new Int16Array(c(n),t>>>0,r>>>0))}function Jf(n,t,r){return _(new Int32Array(c(n),t>>>0,r>>>0))}function zf(n,t,r){return _(new Uint8Array(c(n),t>>>0,r>>>0))}function Zf(n,t,r){return _(new Uint16Array(c(n),t>>>0,r>>>0))}function $f(n,t,r){return _(new Uint32Array(c(n),t>>>0,r>>>0))}function nc(n,t,r){return _(new Float32Array(c(n),t>>>0,r>>>0))}function tc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function rc(n,t){const r=m(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=r}function ec(n,t){throw new Error(g(n,t))}function uc(){return _(e.memory)}function fc(n,t,r){return _(x(n,t,74,S))}function cc(n,t,r){return _(x(n,t,74,S))}function oc(n,t,r){return _(x(n,t,74,S))}function ic(n,t,r){return _(x(n,t,74,A))}function _c(n,t,r){return _(x(n,t,74,S))}function dc(n,t,r){return _(x(n,t,74,S))}function ac(n,t,r){return _(x(n,t,74,S))}function bc(n,t,r){return _(x(n,t,74,S))}function gc(n,t,r){return _(x(n,t,74,S))}function wc(n,t,r){return _(x(n,t,156,T))}function sc(n,t,r){return _(x(n,t,156,I))}function lc(n,t,r){return _(x(n,t,156,I))}function mc(n,t,r){return _(x(n,t,156,I))}function pc(n,t,r){return _(x(n,t,156,I))}function yc(n,t,r){return _(x(n,t,156,I))}function hc(n,t,r){return _(x(n,t,156,I))}function vc(n,t,r){return _(x(n,t,156,I))}function xc(n,t,r){return _(x(n,t,156,I))}function Sc(n,t,r){return _(x(n,t,273,P))}function Ac(n,t,r){return _(x(n,t,1769,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),O=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===R)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[O]:void 0}}),C)i[e]&&w(i[e],O,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:k&&O,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}let w=0;let s=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const l="function"==typeof s.encodeInto?function(n,t){return s.encodeInto(n,t)}:function(n,t){const e=s.encode(n);return t.set(e),{read:n.length,written:e.length}};function m(n,t,e){if(void 0===e){const e=s.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),w=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=l(n,t).written}return w=c,u}function p(n){return null==n}let y=null;function h(){return null!==y&&0!==y.byteLength||(y=new Int32Array(r.memory.buffer)),y}let v=null;function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0fe6314d57d94ffc(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h82c36783cc0b5666(n,t)}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h068b5b5dbaf5a23a(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h85eca137a80fc1e8(n,t)}function P(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(e))}function E(){r.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,h().subarray(n/4,n/4+t)}let M=null;function L(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Y(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function G(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(r.memory.buffer)),v)[n/8+1]=p(u)?0:u,h()[n/4+0]=!p(u)}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,R(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,B(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,L(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return p(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return p(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Rn(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function kn(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function At(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return p(r)?0:_(r)}function Qt(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function Xt(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){return _(c(n).getBoundingClientRect())}function ye(){return O((function(n){c(n).requestFullscreen()}),arguments)}function he(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ve(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function xe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Se(n){const t=c(n).document;return p(t)?0:_(t)}function Ae(){return O((function(n){return _(c(n).innerWidth)}),arguments)}function Te(){return O((function(n){return _(c(n).innerHeight)}),arguments)}function Ie(n){return c(n).devicePixelRatio}function Pe(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function De(n,t,e){const r=c(n)[g(t,e)];return p(r)?0:_(r)}function Ee(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Fe(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Re(n,t){c(n).clearTimeout(t)}function Be(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Me(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function Le(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function Oe(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function ke(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return p(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return p(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Rr(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Br(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Lr(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Or(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function kr(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return p(r)?0:_(r)}function Vr(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=w;h()[n/4+1]=o,h()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(n){return c(n).charCode}function iu(n){return c(n).keyCode}function _u(n){return c(n).altKey}function du(n){return c(n).ctrlKey}function au(n){return c(n).shiftKey}function bu(n){return c(n).metaKey}function gu(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function wu(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function su(n,t,e){return c(n).getModifierState(g(t,e))}function lu(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function mu(n,t){c(n).drawBuffersWEBGL(c(t))}function pu(n){return c(n).x}function yu(n){return c(n).y}function hu(n){console.debug(c(n))}function vu(n){console.error(c(n))}function xu(n,t){console.error(c(n),c(t))}function Su(n){console.info(c(n))}function Au(n){console.log(c(n))}function Tu(n){console.warn(c(n))}function Iu(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Pu(n){return c(n).pointerId}function Du(n){return c(n).pressure}function Eu(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function Fu(n,t){c(n).bindVertexArrayOES(c(t))}function Ru(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function Bu(n,t){c(n).deleteVertexArrayOES(c(t))}function Mu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Lu(n){return c(n).width}function Ou(n,t){c(n).width=t>>>0}function ku(n){return c(n).height}function Cu(n,t){c(n).height=t>>>0}function Vu(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Uu(n){return c(n).width}function Wu(n,t){c(n).width=t>>>0}function ju(n){return c(n).height}function qu(n,t){c(n).height=t>>>0}function Ku(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Yu(n){return c(n).deltaX}function Gu(n){return c(n).deltaY}function Nu(n){return c(n).deltaMode}function Qu(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Xu(n){return c(n).width}function Hu(n){return c(n).height}function Ju(n){return c(n).size}function zu(n){return c(n).type}function Zu(n,t){const e=m(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function $u(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function nf(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function ef(n){const t=c(n).target;return p(t)?0:_(t)}function rf(n){return c(n).cancelBubble}function uf(n){c(n).preventDefault()}function ff(n){c(n).stopPropagation()}function cf(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function of(){return O((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function _f(){return O((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function df(n){return c(n).videoWidth}function af(n){return c(n).videoHeight}function bf(n){return c(n).clientX}function gf(n){return c(n).clientY}function wf(n){return c(n).offsetX}function sf(n){return c(n).offsetY}function lf(n){return c(n).ctrlKey}function mf(n){return c(n).shiftKey}function pf(n){return c(n).altKey}function yf(n){return c(n).metaKey}function hf(n){return c(n).button}function vf(n){return c(n).buttons}function xf(n){return c(n).movementX}function Sf(n){return c(n).movementY}function Af(n){return c(n).matches}function Tf(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function If(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Pf(n){return c(n).matches}function Df(n){return c(n).now()}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return O((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Lf(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Of(){return _(new Object)}function kf(){return O((function(){return _(self.self)}),arguments)}function Cf(){return O((function(){return _(window.window)}),arguments)}function Vf(){return O((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return O((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=m(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;h()[n/4+1]=u,h()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,81,S))}function cc(n,t,e){return _(x(n,t,81,S))}function oc(n,t,e){return _(x(n,t,81,S))}function ic(n,t,e){return _(x(n,t,81,S))}function _c(n,t,e){return _(x(n,t,81,S))}function dc(n,t,e){return _(x(n,t,81,S))}function ac(n,t,e){return _(x(n,t,81,A))}function bc(n,t,e){return _(x(n,t,81,S))}function gc(n,t,e){return _(x(n,t,81,S))}function wc(n,t,e){return _(x(n,t,189,T))}function sc(n,t,e){return _(x(n,t,189,I))}function lc(n,t,e){return _(x(n,t,189,T))}function mc(n,t,e){return _(x(n,t,189,T))}function pc(n,t,e){return _(x(n,t,189,T))}function yc(n,t,e){return _(x(n,t,189,T))}function hc(n,t,e){return _(x(n,t,189,T))}function vc(n,t,e){return _(x(n,t,189,T))}function xc(n,t,e){return _(x(n,t,189,T))}function Sc(n,t,e){return _(x(n,t,322,P))}function Ac(n,t,e){return _(x(n,t,2335,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(0),_=e(1),d=e(9),a=e(8),b=e(91),g=e(94),w=e(12),s=e(95),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),L=v("TYPED_ARRAY_TAG"),O=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:O=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!O||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},O))for(r in C)i[r]&&y(i[r],E);if((!O||!F||F===R)&&(F=E.prototype,O))for(r in C)i[r]&&y(i[r].prototype,F);if(O&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[L]:void 0}}),C)i[r]&&w(i[r],L,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:O,TYPED_ARRAY_TAG:k&&L,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:O&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:O&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(96),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(1),f=e(25),c=e(98),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(0),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const e=y.encode(n);return t.set(e),{read:n.length,written:e.length}};function v(n,t,e){if(void 0===e){const e=y.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),p=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=h(n,t).written}return p=c,u}function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h46a5129307902eed(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hcf94489455ce0e0e(n,t)}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h150cbae26229d2a1(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2ee0dac326480e40(n,t)}function P(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(e))}function E(){r.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function O(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=v(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(r.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,R(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,B(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,O(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return w(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return L((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Rn(){return L((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return L((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function On(){return L((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function Ln(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function kn(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return L((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return L((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return L((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return L((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return L((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return L((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Ot(n,t){c(n).deleteTexture(c(t))}function Lt(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Qt(){return L((function(n,t,e){const r=c(n).getExtension(g(t,e));return w(r)?0:_(r)}),arguments)}function Xt(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function ye(n){const t=c(n).document;return w(t)?0:_(t)}function he(){return L((function(n){return _(c(n).innerWidth)}),arguments)}function ve(){return L((function(n){return _(c(n).innerHeight)}),arguments)}function xe(n){return c(n).devicePixelRatio}function Se(){return L((function(n,t,e){const r=c(n).matchMedia(g(t,e));return w(r)?0:_(r)}),arguments)}function Ae(n,t,e){const r=c(n)[g(t,e)];return w(r)?0:_(r)}function Te(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ie(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Pe(n,t){c(n).clearTimeout(t)}function De(){return L((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Ee(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Fe(){return L((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function Re(n,t,e){const r=c(n).getElementById(g(t,e));return w(r)?0:_(r)}function Be(){return L((function(n,t,e){const r=c(n).querySelector(g(t,e));return w(r)?0:_(r)}),arguments)}function Me(n){return _(c(n).getBoundingClientRect())}function Oe(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Le(){return L((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ke(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return L((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return L((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return w(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return w(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Rr(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Br(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Or(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Lr(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function kr(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Vr(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(){return L((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function iu(){return L((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function _u(){return L((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function du(){return L((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function au(){return L((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function bu(n){return c(n).matches}function gu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function wu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function su(n){return c(n).now()}function lu(n){return c(n).deltaX}function mu(n){return c(n).deltaY}function pu(n){return c(n).deltaMode}function yu(n){return c(n).width}function hu(n){return c(n).height}function vu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function xu(n){console.debug(c(n))}function Su(n){console.error(c(n))}function Au(n,t){console.error(c(n),c(t))}function Tu(n){console.info(c(n))}function Iu(n){console.log(c(n))}function Pu(n){console.warn(c(n))}function Du(n){return c(n).charCode}function Eu(n){return c(n).keyCode}function Fu(n){return c(n).altKey}function Ru(n){return c(n).ctrlKey}function Bu(n){return c(n).shiftKey}function Mu(n){return c(n).metaKey}function Ou(n,t){const e=v(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function Lu(n,t){const e=v(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function ku(n,t,e){return c(n).getModifierState(g(t,e))}function Cu(n){return c(n).matches}function Vu(n){return c(n).pointerId}function Uu(n){return c(n).pressure}function Wu(n,t){const e=v(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function ju(n){return c(n).width}function qu(n,t){c(n).width=t>>>0}function Ku(n){return c(n).height}function Yu(n,t){c(n).height=t>>>0}function Gu(n){const t=c(n).target;return w(t)?0:_(t)}function Nu(n){return c(n).cancelBubble}function Qu(n){c(n).preventDefault()}function Xu(n){c(n).stopPropagation()}function Hu(n){return c(n).clientX}function Ju(n){return c(n).clientY}function zu(n){return c(n).offsetX}function Zu(n){return c(n).offsetY}function $u(n){return c(n).ctrlKey}function nf(n){return c(n).shiftKey}function tf(n){return c(n).altKey}function ef(n){return c(n).metaKey}function rf(n){return c(n).button}function uf(n){return c(n).buttons}function ff(n){return c(n).movementX}function cf(n){return c(n).movementY}function of(n,t){c(n).bindVertexArrayOES(c(t))}function _f(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function df(n,t){c(n).deleteVertexArrayOES(c(t))}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const e=v(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function wf(n,t){c(n).drawBuffersWEBGL(c(t))}function sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function lf(n){return c(n).width}function mf(n,t){c(n).width=t>>>0}function pf(n){return c(n).height}function yf(n,t){c(n).height=t>>>0}function hf(){return L((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return w(u)?0:_(u)}),arguments)}function vf(n){return c(n).videoWidth}function xf(n){return c(n).videoHeight}function Sf(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Af(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function If(n){return c(n).x}function Pf(n){return c(n).y}function Df(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return L((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Of(){return L((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Lf(){return _(new Object)}function kf(){return L((function(){return _(self.self)}),arguments)}function Cf(){return L((function(){return _(window.window)}),arguments)}function Vf(){return L((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return L((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=v(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,74,S))}function cc(n,t,e){return _(x(n,t,74,S))}function oc(n,t,e){return _(x(n,t,74,S))}function ic(n,t,e){return _(x(n,t,74,S))}function _c(n,t,e){return _(x(n,t,74,S))}function dc(n,t,e){return _(x(n,t,74,A))}function ac(n,t,e){return _(x(n,t,74,S))}function bc(n,t,e){return _(x(n,t,74,S))}function gc(n,t,e){return _(x(n,t,74,S))}function wc(n,t,e){return _(x(n,t,161,T))}function sc(n,t,e){return _(x(n,t,161,T))}function lc(n,t,e){return _(x(n,t,161,T))}function mc(n,t,e){return _(x(n,t,161,T))}function pc(n,t,e){return _(x(n,t,161,T))}function yc(n,t,e){return _(x(n,t,161,T))}function hc(n,t,e){return _(x(n,t,161,T))}function vc(n,t,e){return _(x(n,t,161,I))}function xc(n,t,e){return _(x(n,t,161,T))}function Sc(n,t,e){return _(x(n,t,273,P))}function Ac(n,t,e){return _(x(n,t,303,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(1),_=e(0),d=e(9),a=e(8),b=e(92),g=e(95),w=e(12),s=e(96),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),O=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},L))for(r in C)i[r]&&y(i[r],E);if((!L||!F||F===R)&&(F=E.prototype,L))for(r in C)i[r]&&y(i[r].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[O]:void 0}}),C)i[r]&&w(i[r],O,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:k&&O,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:L&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:L&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(97),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(0),f=e(25),c=e(99),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(1),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const e=y.encode(n);return t.set(e),{read:n.length,written:e.length}};function v(n,t,e){if(void 0===e){const e=y.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),p=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=h(n,t).written}return p=c,u}function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2bc5ea4a9ed48ccd(n,t)}function A(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0542cf9988a60b90(n,t,_(e))}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0a5f57d67376551d(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha32775e384881cd3(n,t)}function P(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(e))}function E(){r.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function L(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=v(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(r.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,R(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,B(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,L(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return w(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Rn(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function kn(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Qt(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return w(r)?0:_(r)}),arguments)}function Xt(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){return _(c(n).getBoundingClientRect())}function ye(){return O((function(n){c(n).requestFullscreen()}),arguments)}function he(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ve(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function xe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Se(n){const t=c(n).document;return w(t)?0:_(t)}function Ae(){return O((function(n){return _(c(n).innerWidth)}),arguments)}function Te(){return O((function(n){return _(c(n).innerHeight)}),arguments)}function Ie(n){return c(n).devicePixelRatio}function Pe(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return w(r)?0:_(r)}),arguments)}function De(n,t,e){const r=c(n)[g(t,e)];return w(r)?0:_(r)}function Ee(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Fe(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Re(n,t){c(n).clearTimeout(t)}function Be(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Me(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Le(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function Oe(n,t,e){const r=c(n).getElementById(g(t,e));return w(r)?0:_(r)}function ke(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return w(r)?0:_(r)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return w(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return w(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Rr(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Br(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Lr(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Or(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function kr(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Vr(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(n){return c(n).charCode}function iu(n){return c(n).keyCode}function _u(n){return c(n).altKey}function du(n){return c(n).ctrlKey}function au(n){return c(n).shiftKey}function bu(n){return c(n).metaKey}function gu(n,t){const e=v(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function wu(n,t){const e=v(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function su(n,t,e){return c(n).getModifierState(g(t,e))}function lu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function mu(n,t){c(n).drawBuffersWEBGL(c(t))}function pu(n){return c(n).x}function yu(n){return c(n).y}function hu(n){console.debug(c(n))}function vu(n){console.error(c(n))}function xu(n,t){console.error(c(n),c(t))}function Su(n){console.info(c(n))}function Au(n){console.log(c(n))}function Tu(n){console.warn(c(n))}function Iu(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Pu(n){return c(n).pointerId}function Du(n){return c(n).pressure}function Eu(n,t){const e=v(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function Fu(n,t){c(n).bindVertexArrayOES(c(t))}function Ru(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function Bu(n,t){c(n).deleteVertexArrayOES(c(t))}function Mu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Lu(n){return c(n).width}function Ou(n,t){c(n).width=t>>>0}function ku(n){return c(n).height}function Cu(n,t){c(n).height=t>>>0}function Vu(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return w(u)?0:_(u)}),arguments)}function Uu(n){return c(n).width}function Wu(n,t){c(n).width=t>>>0}function ju(n){return c(n).height}function qu(n,t){c(n).height=t>>>0}function Ku(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Yu(n){return c(n).deltaX}function Gu(n){return c(n).deltaY}function Nu(n){return c(n).deltaMode}function Qu(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Xu(n){return c(n).width}function Hu(n){return c(n).height}function Ju(n){return c(n).size}function zu(n){return c(n).type}function Zu(n,t){const e=v(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function $u(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function nf(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function ef(n){const t=c(n).target;return w(t)?0:_(t)}function rf(n){return c(n).cancelBubble}function uf(n){c(n).preventDefault()}function ff(n){c(n).stopPropagation()}function cf(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function of(){return O((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function _f(){return O((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function df(n){return c(n).videoWidth}function af(n){return c(n).videoHeight}function bf(n){return c(n).clientX}function gf(n){return c(n).clientY}function wf(n){return c(n).offsetX}function sf(n){return c(n).offsetY}function lf(n){return c(n).ctrlKey}function mf(n){return c(n).shiftKey}function pf(n){return c(n).altKey}function yf(n){return c(n).metaKey}function hf(n){return c(n).button}function vf(n){return c(n).buttons}function xf(n){return c(n).movementX}function Sf(n){return c(n).movementY}function Af(n){return c(n).matches}function Tf(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function If(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Pf(n){return c(n).matches}function Df(n){return c(n).now()}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return O((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Lf(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Of(){return _(new Object)}function kf(){return O((function(){return _(self.self)}),arguments)}function Cf(){return O((function(){return _(window.window)}),arguments)}function Vf(){return O((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return O((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=v(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,81,S))}function cc(n,t,e){return _(x(n,t,81,A))}function oc(n,t,e){return _(x(n,t,81,A))}function ic(n,t,e){return _(x(n,t,81,A))}function _c(n,t,e){return _(x(n,t,81,A))}function dc(n,t,e){return _(x(n,t,81,A))}function ac(n,t,e){return _(x(n,t,81,A))}function bc(n,t,e){return _(x(n,t,81,A))}function gc(n,t,e){return _(x(n,t,81,A))}function wc(n,t,e){return _(x(n,t,195,T))}function sc(n,t,e){return _(x(n,t,195,T))}function lc(n,t,e){return _(x(n,t,195,T))}function mc(n,t,e){return _(x(n,t,195,T))}function pc(n,t,e){return _(x(n,t,195,T))}function yc(n,t,e){return _(x(n,t,195,T))}function hc(n,t,e){return _(x(n,t,195,T))}function vc(n,t,e){return _(x(n,t,195,T))}function xc(n,t,e){return _(x(n,t,195,I))}function Sc(n,t,e){return _(x(n,t,321,P))}function Ac(n,t,e){return _(x(n,t,349,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(0),_=e(1),d=e(9),a=e(8),b=e(91),g=e(94),w=e(12),s=e(95),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),L=v("TYPED_ARRAY_TAG"),O=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:O=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!O||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},O))for(r in C)i[r]&&y(i[r],E);if((!O||!F||F===R)&&(F=E.prototype,O))for(r in C)i[r]&&y(i[r].prototype,F);if(O&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[L]:void 0}}),C)i[r]&&w(i[r],L,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:O,TYPED_ARRAY_TAG:k&&L,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:O&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:O&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(96),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(1),f=e(25),c=e(98),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(0),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const e=y.encode(n);return t.set(e),{read:n.length,written:e.length}};function v(n,t,e){if(void 0===e){const e=y.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),p=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=h(n,t).written}return p=c,u}function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3f7f0ccef9b8c7a8(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4237ce1f63fb7c44(n,t)}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0c2eee856e6252df(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h99637a1dc9e1bdd7(n,t)}function P(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(e))}function E(){r.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function L(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=v(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(r.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,R(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,B(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,L(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return w(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Rn(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function kn(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return O((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Qt(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return w(r)?0:_(r)}),arguments)}function Xt(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){return _(c(n).getBoundingClientRect())}function ye(){return O((function(n){c(n).requestFullscreen()}),arguments)}function he(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ve(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function xe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Se(n){const t=c(n).document;return w(t)?0:_(t)}function Ae(){return O((function(n){return _(c(n).innerWidth)}),arguments)}function Te(){return O((function(n){return _(c(n).innerHeight)}),arguments)}function Ie(n){return c(n).devicePixelRatio}function Pe(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return w(r)?0:_(r)}),arguments)}function De(n,t,e){const r=c(n)[g(t,e)];return w(r)?0:_(r)}function Ee(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Fe(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Re(n,t){c(n).clearTimeout(t)}function Be(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Me(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Le(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function Oe(n,t,e){const r=c(n).getElementById(g(t,e));return w(r)?0:_(r)}function ke(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return w(r)?0:_(r)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return O((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return O((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),R(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),B(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),R(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),B(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),R(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),B(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,R(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,R(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,R(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return w(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return w(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Rr(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Br(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Lr(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Or(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function kr(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Vr(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(n){return c(n).charCode}function iu(n){return c(n).keyCode}function _u(n){return c(n).altKey}function du(n){return c(n).ctrlKey}function au(n){return c(n).shiftKey}function bu(n){return c(n).metaKey}function gu(n,t){const e=v(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function wu(n,t){const e=v(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function su(n,t,e){return c(n).getModifierState(g(t,e))}function lu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function mu(n,t){c(n).drawBuffersWEBGL(c(t))}function pu(n){return c(n).x}function yu(n){return c(n).y}function hu(n){console.debug(c(n))}function vu(n){console.error(c(n))}function xu(n,t){console.error(c(n),c(t))}function Su(n){console.info(c(n))}function Au(n){console.log(c(n))}function Tu(n){console.warn(c(n))}function Iu(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Pu(n){return c(n).pointerId}function Du(n){return c(n).pressure}function Eu(n,t){const e=v(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function Fu(n,t){c(n).bindVertexArrayOES(c(t))}function Ru(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function Bu(n,t){c(n).deleteVertexArrayOES(c(t))}function Mu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Lu(n){return c(n).width}function Ou(n,t){c(n).width=t>>>0}function ku(n){return c(n).height}function Cu(n,t){c(n).height=t>>>0}function Vu(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return w(u)?0:_(u)}),arguments)}function Uu(n){return c(n).width}function Wu(n,t){c(n).width=t>>>0}function ju(n){return c(n).height}function qu(n,t){c(n).height=t>>>0}function Ku(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Yu(n){return c(n).deltaX}function Gu(n){return c(n).deltaY}function Nu(n){return c(n).deltaMode}function Qu(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Xu(n){return c(n).width}function Hu(n){return c(n).height}function Ju(n){return c(n).size}function zu(n){return c(n).type}function Zu(n,t){const e=v(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function $u(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function nf(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function ef(n){const t=c(n).target;return w(t)?0:_(t)}function rf(n){return c(n).cancelBubble}function uf(n){c(n).preventDefault()}function ff(n){c(n).stopPropagation()}function cf(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function of(){return O((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function _f(){return O((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function df(n){return c(n).videoWidth}function af(n){return c(n).videoHeight}function bf(n){return c(n).clientX}function gf(n){return c(n).clientY}function wf(n){return c(n).offsetX}function sf(n){return c(n).offsetY}function lf(n){return c(n).ctrlKey}function mf(n){return c(n).shiftKey}function pf(n){return c(n).altKey}function yf(n){return c(n).metaKey}function hf(n){return c(n).button}function vf(n){return c(n).buttons}function xf(n){return c(n).movementX}function Sf(n){return c(n).movementY}function Af(n){return c(n).matches}function Tf(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function If(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Pf(n){return c(n).matches}function Df(n){return c(n).now()}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return O((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Lf(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Of(){return _(new Object)}function kf(){return O((function(){return _(self.self)}),arguments)}function Cf(){return O((function(){return _(window.window)}),arguments)}function Vf(){return O((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return O((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=v(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,83,S))}function cc(n,t,e){return _(x(n,t,83,S))}function oc(n,t,e){return _(x(n,t,83,S))}function ic(n,t,e){return _(x(n,t,83,A))}function _c(n,t,e){return _(x(n,t,83,S))}function dc(n,t,e){return _(x(n,t,83,S))}function ac(n,t,e){return _(x(n,t,83,S))}function bc(n,t,e){return _(x(n,t,83,S))}function gc(n,t,e){return _(x(n,t,83,S))}function wc(n,t,e){return _(x(n,t,190,T))}function sc(n,t,e){return _(x(n,t,190,T))}function lc(n,t,e){return _(x(n,t,190,T))}function mc(n,t,e){return _(x(n,t,190,T))}function pc(n,t,e){return _(x(n,t,190,T))}function yc(n,t,e){return _(x(n,t,190,I))}function hc(n,t,e){return _(x(n,t,190,T))}function vc(n,t,e){return _(x(n,t,190,T))}function xc(n,t,e){return _(x(n,t,190,T))}function Sc(n,t,e){return _(x(n,t,369,P))}function Ac(n,t,e){return _(x(n,t,632,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(0),_=e(1),d=e(9),a=e(8),b=e(91),g=e(94),w=e(12),s=e(95),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),L=v("TYPED_ARRAY_TAG"),O=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:O=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!O||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},O))for(r in C)i[r]&&y(i[r],E);if((!O||!F||F===R)&&(F=E.prototype,O))for(r in C)i[r]&&y(i[r].prototype,F);if(O&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[L]:void 0}}),C)i[r]&&w(i[r],L,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:O,TYPED_ARRAY_TAG:k&&L,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:O&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:O&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(96),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(1),f=e(25),c=e(98),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(0),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const r=y.encode(n);return t.set(r),{read:n.length,written:r.length}};function v(n,t,r){if(void 0===r){const r=y.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),p=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=h(n,t).written}return p=c,u}function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h042a016c16285107(n,t,_(r))}function A(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb51453773db2789b(n,t)}function T(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h5a89726ca9252305(n,t)}function I(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0971e27068f6f882(n,t,_(r))}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,_(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(r))}function E(){e.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function O(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const r=v(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function q(n,t){let r,u;try{r=n,u=t,console.error(g(n,t))}finally{e.__wbindgen_free(r,u,1)}}function K(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(e.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,r){c(n).beginQuery(t>>>0,c(r))}function H(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function tn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function rn(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function en(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,R(e,u))}function un(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,O(e,u))}function cn(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function on(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function _n(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function dn(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function an(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function gn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return w(e)?0:_(e)}function In(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Pn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function Dn(){return L((function(n,t,r){return _(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function En(n,t,r){return _(c(n).getSyncParameter(c(t),r>>>0))}function Fn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),g(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function On(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function Ln(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function kn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Cn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Vn(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function Un(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function zn(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function et(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function ut(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function ct(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function ot(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,r){c(n).attachShader(c(t),c(r))}function dt(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function at(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function wt(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function mt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function pt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function yt(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Ot(n,t){c(n).deleteTexture(c(t))}function Lt(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,r){c(n).depthRange(t,r)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Yt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Qt(){return L((function(n,t,r){const e=c(n).getExtension(g(t,r));return w(e)?0:_(e)}),arguments)}function Xt(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function nr(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function tr(n,t){c(n).linkProgram(c(t))}function rr(n,t,r){c(n).pixelStorei(t>>>0,r)}function er(n,t,r){c(n).polygonOffset(t,r)}function ur(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function fr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function cr(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function or(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ir(n,t){c(n).stencilMask(t>>>0)}function _r(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function dr(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ar(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function br(n,t,r){c(n).uniform1f(c(t),r)}function gr(n,t,r){c(n).uniform1i(c(t),r)}function wr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function sr(n,t){c(n).useProgram(c(t))}function lr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function mr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function pr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function yr(n){const t=c(n).document;return w(t)?0:_(t)}function hr(){return L((function(n){return _(c(n).innerWidth)}),arguments)}function vr(){return L((function(n){return _(c(n).innerHeight)}),arguments)}function xr(n){return c(n).devicePixelRatio}function Sr(){return L((function(n,t,r){const e=c(n).matchMedia(g(t,r));return w(e)?0:_(e)}),arguments)}function Ar(n,t,r){const e=c(n)[g(t,r)];return w(e)?0:_(e)}function Tr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ir(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Pr(n,t){c(n).clearTimeout(t)}function Dr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Er(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Fr(){return L((function(n,t,r){return _(c(n).createElement(g(t,r)))}),arguments)}function Rr(n,t,r){const e=c(n).getElementById(g(t,r));return w(e)?0:_(e)}function Br(){return L((function(n,t,r){const e=c(n).querySelector(g(t,r));return w(e)?0:_(e)}),arguments)}function Mr(n){return _(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Lr(){return L((function(n,t,r,e,u){c(n).setAttribute(g(t,r),g(e,u))}),arguments)}function kr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Cr(n){return _(c(n).style)}function Vr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Ur(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function jr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function qr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Kr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yr(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function Gr(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Nr(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function Qr(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function Jr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function zr(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function Zr(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function $r(n,t){c(n).activeTexture(t>>>0)}function ne(n,t,r){c(n).attachShader(c(t),c(r))}function te(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function re(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ee(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindTexture(t>>>0,c(r))}function fe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ce(n,t){c(n).blendEquation(t>>>0)}function oe(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ie(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function _e(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function de(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ae(n,t){c(n).compileShader(c(t))}function be(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function ge(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function we(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function se(n){const t=c(n).createProgram();return w(t)?0:_(t)}function le(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function me(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function pe(n){const t=c(n).createTexture();return w(t)?0:_(t)}function ye(n,t){c(n).cullFace(t>>>0)}function he(n,t){c(n).deleteBuffer(c(t))}function ve(n,t){c(n).deleteFramebuffer(c(t))}function xe(n,t){c(n).deleteProgram(c(t))}function Se(n,t){c(n).deleteRenderbuffer(c(t))}function Ae(n,t){c(n).deleteShader(c(t))}function Te(n,t){c(n).deleteTexture(c(t))}function Ie(n,t){c(n).depthFunc(t>>>0)}function Pe(n,t){c(n).depthMask(0!==t)}function De(n,t,r){c(n).depthRange(t,r)}function Ee(n,t){c(n).disable(t>>>0)}function Fe(n,t){c(n).disableVertexAttribArray(t>>>0)}function Re(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Be(n,t){c(n).enable(t>>>0)}function Me(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Le(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function ke(n,t){c(n).frontFace(t>>>0)}function Ce(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Ve(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ue(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function We(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function je(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qe(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function Ke(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function Ye(n,t){c(n).linkProgram(c(t))}function Ge(n,t,r){c(n).pixelStorei(t>>>0,r)}function Ne(n,t,r){c(n).polygonOffset(t,r)}function Qe(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Xe(n,t,r,e,u){c(n).scissor(t,r,e,u)}function He(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function Je(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ze(n,t){c(n).stencilMask(t>>>0)}function Ze(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function $e(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function nu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function tu(n,t,r){c(n).uniform1f(c(t),r)}function ru(n,t,r){c(n).uniform1i(c(t),r)}function eu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function cu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function ou(){return L((function(n,t,r,e,u){c(n).setProperty(g(t,r),g(e,u))}),arguments)}function iu(){return L((function(n,t,r,e){c(n).addEventListener(g(t,r),c(e))}),arguments)}function _u(){return L((function(n,t,r,e,u){c(n).addEventListener(g(t,r),c(e),c(u))}),arguments)}function du(){return L((function(n,t,r,e,u){c(n).removeEventListener(g(t,r),c(e),c(u))}),arguments)}function au(){return L((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function bu(n){return c(n).matches}function gu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function wu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function su(n){return c(n).now()}function lu(n){return c(n).deltaX}function mu(n){return c(n).deltaY}function pu(n){return c(n).deltaMode}function yu(n){return c(n).width}function hu(n){return c(n).height}function vu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function xu(n){console.debug(c(n))}function Su(n){console.error(c(n))}function Au(n,t){console.error(c(n),c(t))}function Tu(n){console.info(c(n))}function Iu(n){console.log(c(n))}function Pu(n){console.warn(c(n))}function Du(n){return c(n).charCode}function Eu(n){return c(n).keyCode}function Fu(n){return c(n).altKey}function Ru(n){return c(n).ctrlKey}function Bu(n){return c(n).shiftKey}function Mu(n){return c(n).metaKey}function Ou(n,t){const r=v(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function Lu(n,t){const r=v(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ku(n,t,r){return c(n).getModifierState(g(t,r))}function Cu(n){return c(n).matches}function Vu(n){return c(n).pointerId}function Uu(n){return c(n).pressure}function Wu(n,t){const r=v(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ju(n){return c(n).width}function qu(n,t){c(n).width=t>>>0}function Ku(n){return c(n).height}function Yu(n,t){c(n).height=t>>>0}function Gu(n){const t=c(n).target;return w(t)?0:_(t)}function Nu(n){return c(n).cancelBubble}function Qu(n){c(n).preventDefault()}function Xu(n){c(n).stopPropagation()}function Hu(n){return c(n).clientX}function Ju(n){return c(n).clientY}function zu(n){return c(n).offsetX}function Zu(n){return c(n).offsetY}function $u(n){return c(n).ctrlKey}function nf(n){return c(n).shiftKey}function tf(n){return c(n).altKey}function rf(n){return c(n).metaKey}function ef(n){return c(n).button}function uf(n){return c(n).buttons}function ff(n){return c(n).movementX}function cf(n){return c(n).movementY}function of(n,t){c(n).bindVertexArrayOES(c(t))}function _f(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function df(n,t){c(n).deleteVertexArrayOES(c(t))}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const r=v(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function wf(n,t){c(n).drawBuffersWEBGL(c(t))}function sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function lf(n){return c(n).width}function mf(n,t){c(n).width=t>>>0}function pf(n){return c(n).height}function yf(n,t){c(n).height=t>>>0}function hf(){return L((function(n,t,r,e){const u=c(n).getContext(g(t,r),c(e));return w(u)?0:_(u)}),arguments)}function vf(n){return c(n).videoWidth}function xf(n){return c(n).videoHeight}function Sf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Af(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Tf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function If(n){return c(n).x}function Pf(n){return c(n).y}function Df(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return L((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Of(){return L((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Lf(){return _(new Object)}function kf(){return L((function(){return _(self.self)}),arguments)}function Cf(){return L((function(){return _(window.window)}),arguments)}function Vf(){return L((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,r){return c(n).includes(c(t),r)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,r){return _(new Int8Array(c(n),t>>>0,r>>>0))}function Hf(n,t,r){return _(new Int16Array(c(n),t>>>0,r>>>0))}function Jf(n,t,r){return _(new Int32Array(c(n),t>>>0,r>>>0))}function zf(n,t,r){return _(new Uint8Array(c(n),t>>>0,r>>>0))}function Zf(n,t,r){return _(new Uint16Array(c(n),t>>>0,r>>>0))}function $f(n,t,r){return _(new Uint32Array(c(n),t>>>0,r>>>0))}function nc(n,t,r){return _(new Float32Array(c(n),t>>>0,r>>>0))}function tc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function rc(n,t){const r=v(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ec(n,t){throw new Error(g(n,t))}function uc(){return _(e.memory)}function fc(n,t,r){return _(x(n,t,76,S))}function cc(n,t,r){return _(x(n,t,76,S))}function oc(n,t,r){return _(x(n,t,76,S))}function ic(n,t,r){return _(x(n,t,76,S))}function _c(n,t,r){return _(x(n,t,76,S))}function dc(n,t,r){return _(x(n,t,76,A))}function ac(n,t,r){return _(x(n,t,76,S))}function bc(n,t,r){return _(x(n,t,76,S))}function gc(n,t,r){return _(x(n,t,76,S))}function wc(n,t,r){return _(x(n,t,172,T))}function sc(n,t,r){return _(x(n,t,172,I))}function lc(n,t,r){return _(x(n,t,172,I))}function mc(n,t,r){return _(x(n,t,172,I))}function pc(n,t,r){return _(x(n,t,172,I))}function yc(n,t,r){return _(x(n,t,172,I))}function hc(n,t,r){return _(x(n,t,172,I))}function vc(n,t,r){return _(x(n,t,172,I))}function xc(n,t,r){return _(x(n,t,172,I))}function Sc(n,t,r){return _(x(n,t,296,P))}function Ac(n,t,r){return _(x(n,t,568,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),O=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===R)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[O]:void 0}}),C)i[e]&&w(i[e],O,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:k&&O,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const r=y.encode(n);return t.set(r),{read:n.length,written:r.length}};function v(n,t,r){if(void 0===r){const r=y.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),p=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=h(n,t).written}return p=c,u}function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0f66fd62b4b275da(n,t,_(r))}function A(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h7cff94dcb9ee1dba(n,t)}function T(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1c1d062b29fe3fe8(n,t,_(r))}function I(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h6b571f2603fab5db(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,_(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(r))}function E(){e.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function O(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const r=v(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function q(n,t){let r,u;try{r=n,u=t,console.error(g(n,t))}finally{e.__wbindgen_free(r,u,1)}}function K(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(e.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,r){c(n).beginQuery(t>>>0,c(r))}function H(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function tn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function rn(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function en(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,R(e,u))}function un(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,O(e,u))}function cn(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function on(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function _n(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function dn(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function an(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function gn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return w(e)?0:_(e)}function In(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Pn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function Dn(){return L((function(n,t,r){return _(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function En(n,t,r){return _(c(n).getSyncParameter(c(t),r>>>0))}function Fn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),g(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function On(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function Ln(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function kn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Cn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Vn(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function Un(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function zn(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function et(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function ut(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function ct(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function ot(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,r){c(n).attachShader(c(t),c(r))}function dt(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function at(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function wt(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function mt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function pt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function yt(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Ot(n,t){c(n).deleteTexture(c(t))}function Lt(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,r){c(n).depthRange(t,r)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Yt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Qt(){return L((function(n,t,r){const e=c(n).getExtension(g(t,r));return w(e)?0:_(e)}),arguments)}function Xt(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function nr(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function tr(n,t){c(n).linkProgram(c(t))}function rr(n,t,r){c(n).pixelStorei(t>>>0,r)}function er(n,t,r){c(n).polygonOffset(t,r)}function ur(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function fr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function cr(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function or(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ir(n,t){c(n).stencilMask(t>>>0)}function _r(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function dr(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ar(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function br(n,t,r){c(n).uniform1f(c(t),r)}function gr(n,t,r){c(n).uniform1i(c(t),r)}function wr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function sr(n,t){c(n).useProgram(c(t))}function lr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function mr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function pr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function yr(n){const t=c(n).document;return w(t)?0:_(t)}function hr(){return L((function(n){return _(c(n).innerWidth)}),arguments)}function vr(){return L((function(n){return _(c(n).innerHeight)}),arguments)}function xr(n){return c(n).devicePixelRatio}function Sr(){return L((function(n,t,r){const e=c(n).matchMedia(g(t,r));return w(e)?0:_(e)}),arguments)}function Ar(n,t,r){const e=c(n)[g(t,r)];return w(e)?0:_(e)}function Tr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ir(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Pr(n,t){c(n).clearTimeout(t)}function Dr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Er(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Fr(){return L((function(n,t,r){return _(c(n).createElement(g(t,r)))}),arguments)}function Rr(n,t,r){const e=c(n).getElementById(g(t,r));return w(e)?0:_(e)}function Br(){return L((function(n,t,r){const e=c(n).querySelector(g(t,r));return w(e)?0:_(e)}),arguments)}function Mr(n){return _(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Lr(){return L((function(n,t,r,e,u){c(n).setAttribute(g(t,r),g(e,u))}),arguments)}function kr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Cr(n){return _(c(n).style)}function Vr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Ur(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function jr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function qr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Kr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yr(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function Gr(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Nr(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function Qr(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function Jr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function zr(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function Zr(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function $r(n,t){c(n).activeTexture(t>>>0)}function ne(n,t,r){c(n).attachShader(c(t),c(r))}function te(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function re(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ee(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindTexture(t>>>0,c(r))}function fe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ce(n,t){c(n).blendEquation(t>>>0)}function oe(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ie(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function _e(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function de(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ae(n,t){c(n).compileShader(c(t))}function be(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function ge(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function we(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function se(n){const t=c(n).createProgram();return w(t)?0:_(t)}function le(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function me(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function pe(n){const t=c(n).createTexture();return w(t)?0:_(t)}function ye(n,t){c(n).cullFace(t>>>0)}function he(n,t){c(n).deleteBuffer(c(t))}function ve(n,t){c(n).deleteFramebuffer(c(t))}function xe(n,t){c(n).deleteProgram(c(t))}function Se(n,t){c(n).deleteRenderbuffer(c(t))}function Ae(n,t){c(n).deleteShader(c(t))}function Te(n,t){c(n).deleteTexture(c(t))}function Ie(n,t){c(n).depthFunc(t>>>0)}function Pe(n,t){c(n).depthMask(0!==t)}function De(n,t,r){c(n).depthRange(t,r)}function Ee(n,t){c(n).disable(t>>>0)}function Fe(n,t){c(n).disableVertexAttribArray(t>>>0)}function Re(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Be(n,t){c(n).enable(t>>>0)}function Me(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Le(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function ke(n,t){c(n).frontFace(t>>>0)}function Ce(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Ve(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ue(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function We(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function je(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qe(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function Ke(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function Ye(n,t){c(n).linkProgram(c(t))}function Ge(n,t,r){c(n).pixelStorei(t>>>0,r)}function Ne(n,t,r){c(n).polygonOffset(t,r)}function Qe(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Xe(n,t,r,e,u){c(n).scissor(t,r,e,u)}function He(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function Je(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ze(n,t){c(n).stencilMask(t>>>0)}function Ze(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function $e(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function nu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function tu(n,t,r){c(n).uniform1f(c(t),r)}function ru(n,t,r){c(n).uniform1i(c(t),r)}function eu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function cu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function ou(){return L((function(n,t,r,e,u){c(n).setProperty(g(t,r),g(e,u))}),arguments)}function iu(){return L((function(n,t,r,e){c(n).addEventListener(g(t,r),c(e))}),arguments)}function _u(){return L((function(n,t,r,e,u){c(n).addEventListener(g(t,r),c(e),c(u))}),arguments)}function du(){return L((function(n,t,r,e,u){c(n).removeEventListener(g(t,r),c(e),c(u))}),arguments)}function au(){return L((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function bu(n){return c(n).matches}function gu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function wu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function su(n){return c(n).now()}function lu(n){return c(n).deltaX}function mu(n){return c(n).deltaY}function pu(n){return c(n).deltaMode}function yu(n){return c(n).width}function hu(n){return c(n).height}function vu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function xu(n){console.debug(c(n))}function Su(n){console.error(c(n))}function Au(n,t){console.error(c(n),c(t))}function Tu(n){console.info(c(n))}function Iu(n){console.log(c(n))}function Pu(n){console.warn(c(n))}function Du(n){return c(n).charCode}function Eu(n){return c(n).keyCode}function Fu(n){return c(n).altKey}function Ru(n){return c(n).ctrlKey}function Bu(n){return c(n).shiftKey}function Mu(n){return c(n).metaKey}function Ou(n,t){const r=v(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function Lu(n,t){const r=v(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ku(n,t,r){return c(n).getModifierState(g(t,r))}function Cu(n){return c(n).matches}function Vu(n){return c(n).pointerId}function Uu(n){return c(n).pressure}function Wu(n,t){const r=v(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ju(n){return c(n).width}function qu(n,t){c(n).width=t>>>0}function Ku(n){return c(n).height}function Yu(n,t){c(n).height=t>>>0}function Gu(n){const t=c(n).target;return w(t)?0:_(t)}function Nu(n){return c(n).cancelBubble}function Qu(n){c(n).preventDefault()}function Xu(n){c(n).stopPropagation()}function Hu(n){return c(n).clientX}function Ju(n){return c(n).clientY}function zu(n){return c(n).offsetX}function Zu(n){return c(n).offsetY}function $u(n){return c(n).ctrlKey}function nf(n){return c(n).shiftKey}function tf(n){return c(n).altKey}function rf(n){return c(n).metaKey}function ef(n){return c(n).button}function uf(n){return c(n).buttons}function ff(n){return c(n).movementX}function cf(n){return c(n).movementY}function of(n,t){c(n).bindVertexArrayOES(c(t))}function _f(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function df(n,t){c(n).deleteVertexArrayOES(c(t))}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const r=v(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function wf(n,t){c(n).drawBuffersWEBGL(c(t))}function sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function lf(n){return c(n).width}function mf(n,t){c(n).width=t>>>0}function pf(n){return c(n).height}function yf(n,t){c(n).height=t>>>0}function hf(){return L((function(n,t,r,e){const u=c(n).getContext(g(t,r),c(e));return w(u)?0:_(u)}),arguments)}function vf(n){return c(n).videoWidth}function xf(n){return c(n).videoHeight}function Sf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Af(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Tf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function If(n){return c(n).x}function Pf(n){return c(n).y}function Df(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return L((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Of(){return L((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Lf(){return _(new Object)}function kf(){return L((function(){return _(self.self)}),arguments)}function Cf(){return L((function(){return _(window.window)}),arguments)}function Vf(){return L((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,r){return c(n).includes(c(t),r)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,r){return _(new Int8Array(c(n),t>>>0,r>>>0))}function Hf(n,t,r){return _(new Int16Array(c(n),t>>>0,r>>>0))}function Jf(n,t,r){return _(new Int32Array(c(n),t>>>0,r>>>0))}function zf(n,t,r){return _(new Uint8Array(c(n),t>>>0,r>>>0))}function Zf(n,t,r){return _(new Uint16Array(c(n),t>>>0,r>>>0))}function $f(n,t,r){return _(new Uint32Array(c(n),t>>>0,r>>>0))}function nc(n,t,r){return _(new Float32Array(c(n),t>>>0,r>>>0))}function tc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function rc(n,t){const r=v(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ec(n,t){throw new Error(g(n,t))}function uc(){return _(e.memory)}function fc(n,t,r){return _(x(n,t,76,S))}function cc(n,t,r){return _(x(n,t,76,S))}function oc(n,t,r){return _(x(n,t,76,A))}function ic(n,t,r){return _(x(n,t,76,S))}function _c(n,t,r){return _(x(n,t,76,S))}function dc(n,t,r){return _(x(n,t,76,S))}function ac(n,t,r){return _(x(n,t,76,S))}function bc(n,t,r){return _(x(n,t,76,S))}function gc(n,t,r){return _(x(n,t,76,S))}function wc(n,t,r){return _(x(n,t,232,T))}function sc(n,t,r){return _(x(n,t,232,T))}function lc(n,t,r){return _(x(n,t,232,T))}function mc(n,t,r){return _(x(n,t,232,T))}function pc(n,t,r){return _(x(n,t,232,T))}function yc(n,t,r){return _(x(n,t,232,T))}function hc(n,t,r){return _(x(n,t,232,T))}function vc(n,t,r){return _(x(n,t,232,T))}function xc(n,t,r){return _(x(n,t,232,I))}function Sc(n,t,r){return _(x(n,t,297,P))}function Ac(n,t,r){return _(x(n,t,569,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),O=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===R)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[O]:void 0}}),C)i[e]&&w(i[e],O,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:k&&O,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const e=y.encode(n);return t.set(e),{read:n.length,written:e.length}};function v(n,t,e){if(void 0===e){const e=y.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),p=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=h(n,t).written}return p=c,u}function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4a3c91e245cae5e3(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h51d2a23d5b7347bf(n,t)}function T(n,t){r.wasm_bindgen__convert__closures__invoke0_mut__h8173c2c1d34b6ad7(n,t)}function I(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__h0e92150fb0dafbf5(n,t,_(e))}function P(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(e))}function E(){r.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function L(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function k(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function O(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=v(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(r.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,B(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,R(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,L(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return w(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return k((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Bn(){return k((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function kn(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function On(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),B(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),R(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),B(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),R(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),B(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),R(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,B(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,B(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,B(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Bt(n,t){c(n).deleteProgram(c(t))}function Rt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function kt(n,t){c(n).depthFunc(t>>>0)}function Ot(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Qt(){return k((function(n,t,e){const r=c(n).getExtension(g(t,e));return w(r)?0:_(r)}),arguments)}function Xt(){return k((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){return _(c(n).getBoundingClientRect())}function ye(){return k((function(n){c(n).requestFullscreen()}),arguments)}function he(){return k((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ve(){return k((function(n,t){c(n).setPointerCapture(t)}),arguments)}function xe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Se(n){const t=c(n).document;return w(t)?0:_(t)}function Ae(){return k((function(n){return _(c(n).innerWidth)}),arguments)}function Te(){return k((function(n){return _(c(n).innerHeight)}),arguments)}function Ie(n){return c(n).devicePixelRatio}function Pe(){return k((function(n,t,e){const r=c(n).matchMedia(g(t,e));return w(r)?0:_(r)}),arguments)}function De(n,t,e){const r=c(n)[g(t,e)];return w(r)?0:_(r)}function Ee(){return k((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Fe(){return k((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Be(n,t){c(n).clearTimeout(t)}function Re(){return k((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Me(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Le(){return k((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function ke(n,t,e){const r=c(n).getElementById(g(t,e));return w(r)?0:_(r)}function Oe(){return k((function(n,t,e){const r=c(n).querySelector(g(t,e));return w(r)?0:_(r)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),B(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),R(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),B(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),R(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),B(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),R(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,B(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,B(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,B(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return w(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return w(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Br(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Rr(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Lr(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function kr(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Or(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Vr(){return k((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(n){return c(n).charCode}function iu(n){return c(n).keyCode}function _u(n){return c(n).altKey}function du(n){return c(n).ctrlKey}function au(n){return c(n).shiftKey}function bu(n){return c(n).metaKey}function gu(n,t){const e=v(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function wu(n,t){const e=v(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function su(n,t,e){return c(n).getModifierState(g(t,e))}function lu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function mu(n,t){c(n).drawBuffersWEBGL(c(t))}function pu(n){return c(n).x}function yu(n){return c(n).y}function hu(n){console.debug(c(n))}function vu(n){console.error(c(n))}function xu(n,t){console.error(c(n),c(t))}function Su(n){console.info(c(n))}function Au(n){console.log(c(n))}function Tu(n){console.warn(c(n))}function Iu(){return k((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Pu(n){return c(n).pointerId}function Du(n){return c(n).pressure}function Eu(n,t){const e=v(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function Fu(n,t){c(n).bindVertexArrayOES(c(t))}function Bu(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function Ru(n,t){c(n).deleteVertexArrayOES(c(t))}function Mu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Lu(n){return c(n).width}function ku(n,t){c(n).width=t>>>0}function Ou(n){return c(n).height}function Cu(n,t){c(n).height=t>>>0}function Vu(){return k((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return w(u)?0:_(u)}),arguments)}function Uu(n){return c(n).width}function Wu(n,t){c(n).width=t>>>0}function ju(n){return c(n).height}function qu(n,t){c(n).height=t>>>0}function Ku(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Yu(n){return c(n).deltaX}function Gu(n){return c(n).deltaY}function Nu(n){return c(n).deltaMode}function Qu(){return k((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Xu(n){return c(n).width}function Hu(n){return c(n).height}function Ju(n){return c(n).size}function zu(n){return c(n).type}function Zu(n,t){const e=v(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function $u(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function nf(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function ef(n){const t=c(n).target;return w(t)?0:_(t)}function rf(n){return c(n).cancelBubble}function uf(n){c(n).preventDefault()}function ff(n){c(n).stopPropagation()}function cf(){return k((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function of(){return k((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function _f(){return k((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function df(n){return c(n).videoWidth}function af(n){return c(n).videoHeight}function bf(n){return c(n).clientX}function gf(n){return c(n).clientY}function wf(n){return c(n).offsetX}function sf(n){return c(n).offsetY}function lf(n){return c(n).ctrlKey}function mf(n){return c(n).shiftKey}function pf(n){return c(n).altKey}function yf(n){return c(n).metaKey}function hf(n){return c(n).button}function vf(n){return c(n).buttons}function xf(n){return c(n).movementX}function Sf(n){return c(n).movementY}function Af(n){return c(n).matches}function Tf(){return k((function(n,t){c(n).addListener(c(t))}),arguments)}function If(){return k((function(n,t){c(n).removeListener(c(t))}),arguments)}function Pf(n){return c(n).matches}function Df(n){return c(n).now()}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Bf(){return _(new Array)}function Rf(n,t){return _(new Function(g(n,t)))}function Mf(){return k((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Lf(){return k((function(n,t){return _(c(n).call(c(t)))}),arguments)}function kf(){return _(new Object)}function Of(){return k((function(){return _(self.self)}),arguments)}function Cf(){return k((function(){return _(window.window)}),arguments)}function Vf(){return k((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return k((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return k((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=v(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,83,S))}function cc(n,t,e){return _(x(n,t,83,S))}function oc(n,t,e){return _(x(n,t,83,S))}function ic(n,t,e){return _(x(n,t,83,A))}function _c(n,t,e){return _(x(n,t,83,S))}function dc(n,t,e){return _(x(n,t,83,S))}function ac(n,t,e){return _(x(n,t,83,S))}function bc(n,t,e){return _(x(n,t,83,S))}function gc(n,t,e){return _(x(n,t,83,S))}function wc(n,t,e){return _(x(n,t,265,T))}function sc(n,t,e){return _(x(n,t,265,I))}function lc(n,t,e){return _(x(n,t,265,I))}function mc(n,t,e){return _(x(n,t,265,I))}function pc(n,t,e){return _(x(n,t,265,I))}function yc(n,t,e){return _(x(n,t,265,I))}function hc(n,t,e){return _(x(n,t,265,I))}function vc(n,t,e){return _(x(n,t,265,I))}function xc(n,t,e){return _(x(n,t,265,I))}function Sc(n,t,e){return _(x(n,t,369,P))}function Ac(n,t,e){return _(x(n,t,632,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(0),_=e(1),d=e(9),a=e(8),b=e(91),g=e(94),w=e(12),s=e(95),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),L=v("TYPED_ARRAY_TAG"),k=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:k=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!k||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},k))for(r in C)i[r]&&y(i[r],E);if((!k||!F||F===B)&&(F=E.prototype,k))for(r in C)i[r]&&y(i[r].prototype,F);if(k&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[L]:void 0}}),C)i[r]&&w(i[r],L,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:k,TYPED_ARRAY_TAG:O&&L,aTypedArray:function(n){if(W(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:k&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:k&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(96),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(1),f=e(25),c=e(98),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(0),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const e=y.encode(n);return t.set(e),{read:n.length,written:e.length}};function v(n,t,e){if(void 0===e){const e=y.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),p=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=h(n,t).written}return p=c,u}function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2265ce5d0f76d406(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h8beffabf3fb05cbf(n,t)}function T(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__h0890abb2988a839d(n,t,_(e))}function I(n,t){r.wasm_bindgen__convert__closures__invoke0_mut__h8b2385efff0655bc(n,t)}function P(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(e))}function E(){r.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function L(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function k(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function O(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=v(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(r.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,B(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,R(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,L(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return w(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return k((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Bn(){return k((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function kn(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function On(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),B(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),R(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),B(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),R(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),B(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),R(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,B(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,B(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,B(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Bt(n,t){c(n).deleteProgram(c(t))}function Rt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function kt(n,t){c(n).depthFunc(t>>>0)}function Ot(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Qt(){return k((function(n,t,e){const r=c(n).getExtension(g(t,e));return w(r)?0:_(r)}),arguments)}function Xt(){return k((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){return _(c(n).getBoundingClientRect())}function ye(){return k((function(n){c(n).requestFullscreen()}),arguments)}function he(){return k((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ve(){return k((function(n,t){c(n).setPointerCapture(t)}),arguments)}function xe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Se(n){const t=c(n).document;return w(t)?0:_(t)}function Ae(){return k((function(n){return _(c(n).innerWidth)}),arguments)}function Te(){return k((function(n){return _(c(n).innerHeight)}),arguments)}function Ie(n){return c(n).devicePixelRatio}function Pe(){return k((function(n,t,e){const r=c(n).matchMedia(g(t,e));return w(r)?0:_(r)}),arguments)}function De(n,t,e){const r=c(n)[g(t,e)];return w(r)?0:_(r)}function Ee(){return k((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Fe(){return k((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Be(n,t){c(n).clearTimeout(t)}function Re(){return k((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Me(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Le(){return k((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function ke(n,t,e){const r=c(n).getElementById(g(t,e));return w(r)?0:_(r)}function Oe(){return k((function(n,t,e){const r=c(n).querySelector(g(t,e));return w(r)?0:_(r)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),B(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),R(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),B(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),R(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),B(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),R(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,B(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,B(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,B(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return w(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return w(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Br(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Rr(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Lr(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function kr(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Or(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Vr(){return k((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(n){return c(n).charCode}function iu(n){return c(n).keyCode}function _u(n){return c(n).altKey}function du(n){return c(n).ctrlKey}function au(n){return c(n).shiftKey}function bu(n){return c(n).metaKey}function gu(n,t){const e=v(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function wu(n,t){const e=v(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function su(n,t,e){return c(n).getModifierState(g(t,e))}function lu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function mu(n,t){c(n).drawBuffersWEBGL(c(t))}function pu(n){return c(n).x}function yu(n){return c(n).y}function hu(n){console.debug(c(n))}function vu(n){console.error(c(n))}function xu(n,t){console.error(c(n),c(t))}function Su(n){console.info(c(n))}function Au(n){console.log(c(n))}function Tu(n){console.warn(c(n))}function Iu(){return k((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Pu(n){return c(n).pointerId}function Du(n){return c(n).pressure}function Eu(n,t){const e=v(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function Fu(n,t){c(n).bindVertexArrayOES(c(t))}function Bu(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function Ru(n,t){c(n).deleteVertexArrayOES(c(t))}function Mu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Lu(n){return c(n).width}function ku(n,t){c(n).width=t>>>0}function Ou(n){return c(n).height}function Cu(n,t){c(n).height=t>>>0}function Vu(){return k((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return w(u)?0:_(u)}),arguments)}function Uu(n){return c(n).width}function Wu(n,t){c(n).width=t>>>0}function ju(n){return c(n).height}function qu(n,t){c(n).height=t>>>0}function Ku(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Yu(n){return c(n).deltaX}function Gu(n){return c(n).deltaY}function Nu(n){return c(n).deltaMode}function Qu(){return k((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Xu(n){return c(n).width}function Hu(n){return c(n).height}function Ju(n){return c(n).size}function zu(n){return c(n).type}function Zu(n,t){const e=v(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function $u(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function nf(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function ef(n){const t=c(n).target;return w(t)?0:_(t)}function rf(n){return c(n).cancelBubble}function uf(n){c(n).preventDefault()}function ff(n){c(n).stopPropagation()}function cf(){return k((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function of(){return k((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function _f(){return k((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function df(n){return c(n).videoWidth}function af(n){return c(n).videoHeight}function bf(n){return c(n).clientX}function gf(n){return c(n).clientY}function wf(n){return c(n).offsetX}function sf(n){return c(n).offsetY}function lf(n){return c(n).ctrlKey}function mf(n){return c(n).shiftKey}function pf(n){return c(n).altKey}function yf(n){return c(n).metaKey}function hf(n){return c(n).button}function vf(n){return c(n).buttons}function xf(n){return c(n).movementX}function Sf(n){return c(n).movementY}function Af(n){return c(n).matches}function Tf(){return k((function(n,t){c(n).addListener(c(t))}),arguments)}function If(){return k((function(n,t){c(n).removeListener(c(t))}),arguments)}function Pf(n){return c(n).matches}function Df(n){return c(n).now()}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Bf(){return _(new Array)}function Rf(n,t){return _(new Function(g(n,t)))}function Mf(){return k((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Lf(){return k((function(n,t){return _(c(n).call(c(t)))}),arguments)}function kf(){return _(new Object)}function Of(){return k((function(){return _(self.self)}),arguments)}function Cf(){return k((function(){return _(window.window)}),arguments)}function Vf(){return k((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return k((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return k((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=v(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,104,S))}function cc(n,t,e){return _(x(n,t,104,S))}function oc(n,t,e){return _(x(n,t,104,S))}function ic(n,t,e){return _(x(n,t,104,S))}function _c(n,t,e){return _(x(n,t,104,S))}function dc(n,t,e){return _(x(n,t,104,S))}function ac(n,t,e){return _(x(n,t,104,S))}function bc(n,t,e){return _(x(n,t,104,S))}function gc(n,t,e){return _(x(n,t,104,A))}function wc(n,t,e){return _(x(n,t,318,T))}function sc(n,t,e){return _(x(n,t,318,I))}function lc(n,t,e){return _(x(n,t,318,T))}function mc(n,t,e){return _(x(n,t,318,T))}function pc(n,t,e){return _(x(n,t,318,T))}function yc(n,t,e){return _(x(n,t,318,T))}function hc(n,t,e){return _(x(n,t,318,T))}function vc(n,t,e){return _(x(n,t,318,T))}function xc(n,t,e){return _(x(n,t,318,T))}function Sc(n,t,e){return _(x(n,t,370,P))}function Ac(n,t,e){return _(x(n,t,633,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(0),_=e(1),d=e(9),a=e(8),b=e(91),g=e(94),w=e(12),s=e(95),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),L=v("TYPED_ARRAY_TAG"),k=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:k=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!k||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},k))for(r in C)i[r]&&y(i[r],E);if((!k||!F||F===B)&&(F=E.prototype,k))for(r in C)i[r]&&y(i[r].prototype,F);if(k&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[L]:void 0}}),C)i[r]&&w(i[r],L,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:k,TYPED_ARRAY_TAG:O&&L,aTypedArray:function(n){if(W(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:k&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:k&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(96),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(1),f=e(25),c=e(98),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(0),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const r=y.encode(n);return t.set(r),{read:n.length,written:r.length}};function v(n,t,r){if(void 0===r){const r=y.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),p=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=h(n,t).written}return p=c,u}function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3c2cbd2e60193c26(n,t,_(r))}function A(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h56c9982a164c3ba2(n,t)}function T(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9ae4ccc9aaa9da61(n,t)}function I(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h00e2cd2926fa814a(n,t,_(r))}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,_(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(r))}function E(){e.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function O(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const r=v(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function q(n,t){let r,u;try{r=n,u=t,console.error(g(n,t))}finally{e.__wbindgen_free(r,u,1)}}function K(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(e.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,r){c(n).beginQuery(t>>>0,c(r))}function H(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function tn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function rn(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function en(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,R(e,u))}function un(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,O(e,u))}function cn(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function on(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function _n(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function dn(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function an(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function gn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return w(e)?0:_(e)}function In(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Pn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function Dn(){return L((function(n,t,r){return _(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function En(n,t,r){return _(c(n).getSyncParameter(c(t),r>>>0))}function Fn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),g(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function On(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function Ln(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function kn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Cn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Vn(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function Un(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function zn(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function et(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function ut(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function ct(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function ot(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,r){c(n).attachShader(c(t),c(r))}function dt(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function at(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function wt(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function mt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function pt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function yt(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Ot(n,t){c(n).deleteTexture(c(t))}function Lt(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,r){c(n).depthRange(t,r)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Yt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Qt(){return L((function(n,t,r){const e=c(n).getExtension(g(t,r));return w(e)?0:_(e)}),arguments)}function Xt(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function nr(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function tr(n,t){c(n).linkProgram(c(t))}function rr(n,t,r){c(n).pixelStorei(t>>>0,r)}function er(n,t,r){c(n).polygonOffset(t,r)}function ur(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function fr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function cr(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function or(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ir(n,t){c(n).stencilMask(t>>>0)}function _r(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function dr(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ar(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function br(n,t,r){c(n).uniform1f(c(t),r)}function gr(n,t,r){c(n).uniform1i(c(t),r)}function wr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function sr(n,t){c(n).useProgram(c(t))}function lr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function mr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function pr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function yr(n){const t=c(n).document;return w(t)?0:_(t)}function hr(){return L((function(n){return _(c(n).innerWidth)}),arguments)}function vr(){return L((function(n){return _(c(n).innerHeight)}),arguments)}function xr(n){return c(n).devicePixelRatio}function Sr(){return L((function(n,t,r){const e=c(n).matchMedia(g(t,r));return w(e)?0:_(e)}),arguments)}function Ar(n,t,r){const e=c(n)[g(t,r)];return w(e)?0:_(e)}function Tr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ir(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Pr(n,t){c(n).clearTimeout(t)}function Dr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Er(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Fr(){return L((function(n,t,r){return _(c(n).createElement(g(t,r)))}),arguments)}function Rr(n,t,r){const e=c(n).getElementById(g(t,r));return w(e)?0:_(e)}function Br(){return L((function(n,t,r){const e=c(n).querySelector(g(t,r));return w(e)?0:_(e)}),arguments)}function Mr(n){return _(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Lr(){return L((function(n,t,r,e,u){c(n).setAttribute(g(t,r),g(e,u))}),arguments)}function kr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Cr(n){return _(c(n).style)}function Vr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Ur(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function jr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function qr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Kr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yr(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function Gr(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Nr(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function Qr(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function Jr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function zr(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function Zr(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function $r(n,t){c(n).activeTexture(t>>>0)}function ne(n,t,r){c(n).attachShader(c(t),c(r))}function te(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function re(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ee(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindTexture(t>>>0,c(r))}function fe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ce(n,t){c(n).blendEquation(t>>>0)}function oe(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ie(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function _e(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function de(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ae(n,t){c(n).compileShader(c(t))}function be(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function ge(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function we(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function se(n){const t=c(n).createProgram();return w(t)?0:_(t)}function le(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function me(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function pe(n){const t=c(n).createTexture();return w(t)?0:_(t)}function ye(n,t){c(n).cullFace(t>>>0)}function he(n,t){c(n).deleteBuffer(c(t))}function ve(n,t){c(n).deleteFramebuffer(c(t))}function xe(n,t){c(n).deleteProgram(c(t))}function Se(n,t){c(n).deleteRenderbuffer(c(t))}function Ae(n,t){c(n).deleteShader(c(t))}function Te(n,t){c(n).deleteTexture(c(t))}function Ie(n,t){c(n).depthFunc(t>>>0)}function Pe(n,t){c(n).depthMask(0!==t)}function De(n,t,r){c(n).depthRange(t,r)}function Ee(n,t){c(n).disable(t>>>0)}function Fe(n,t){c(n).disableVertexAttribArray(t>>>0)}function Re(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Be(n,t){c(n).enable(t>>>0)}function Me(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Le(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function ke(n,t){c(n).frontFace(t>>>0)}function Ce(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Ve(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ue(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function We(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function je(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qe(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function Ke(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function Ye(n,t){c(n).linkProgram(c(t))}function Ge(n,t,r){c(n).pixelStorei(t>>>0,r)}function Ne(n,t,r){c(n).polygonOffset(t,r)}function Qe(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Xe(n,t,r,e,u){c(n).scissor(t,r,e,u)}function He(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function Je(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ze(n,t){c(n).stencilMask(t>>>0)}function Ze(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function $e(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function nu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function tu(n,t,r){c(n).uniform1f(c(t),r)}function ru(n,t,r){c(n).uniform1i(c(t),r)}function eu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function cu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function ou(){return L((function(n,t,r,e,u){c(n).setProperty(g(t,r),g(e,u))}),arguments)}function iu(){return L((function(n,t,r,e){c(n).addEventListener(g(t,r),c(e))}),arguments)}function _u(){return L((function(n,t,r,e,u){c(n).addEventListener(g(t,r),c(e),c(u))}),arguments)}function du(){return L((function(n,t,r,e,u){c(n).removeEventListener(g(t,r),c(e),c(u))}),arguments)}function au(){return L((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function bu(n){return c(n).matches}function gu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function wu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function su(n){return c(n).now()}function lu(n){return c(n).deltaX}function mu(n){return c(n).deltaY}function pu(n){return c(n).deltaMode}function yu(n){return c(n).width}function hu(n){return c(n).height}function vu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function xu(n){console.debug(c(n))}function Su(n){console.error(c(n))}function Au(n,t){console.error(c(n),c(t))}function Tu(n){console.info(c(n))}function Iu(n){console.log(c(n))}function Pu(n){console.warn(c(n))}function Du(n){return c(n).charCode}function Eu(n){return c(n).keyCode}function Fu(n){return c(n).altKey}function Ru(n){return c(n).ctrlKey}function Bu(n){return c(n).shiftKey}function Mu(n){return c(n).metaKey}function Ou(n,t){const r=v(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function Lu(n,t){const r=v(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ku(n,t,r){return c(n).getModifierState(g(t,r))}function Cu(n){return c(n).matches}function Vu(n){return c(n).pointerId}function Uu(n){return c(n).pressure}function Wu(n,t){const r=v(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ju(n){return c(n).width}function qu(n,t){c(n).width=t>>>0}function Ku(n){return c(n).height}function Yu(n,t){c(n).height=t>>>0}function Gu(n){const t=c(n).target;return w(t)?0:_(t)}function Nu(n){return c(n).cancelBubble}function Qu(n){c(n).preventDefault()}function Xu(n){c(n).stopPropagation()}function Hu(n){return c(n).clientX}function Ju(n){return c(n).clientY}function zu(n){return c(n).offsetX}function Zu(n){return c(n).offsetY}function $u(n){return c(n).ctrlKey}function nf(n){return c(n).shiftKey}function tf(n){return c(n).altKey}function rf(n){return c(n).metaKey}function ef(n){return c(n).button}function uf(n){return c(n).buttons}function ff(n){return c(n).movementX}function cf(n){return c(n).movementY}function of(n,t){c(n).bindVertexArrayOES(c(t))}function _f(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function df(n,t){c(n).deleteVertexArrayOES(c(t))}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const r=v(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function wf(n,t){c(n).drawBuffersWEBGL(c(t))}function sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function lf(n){return c(n).width}function mf(n,t){c(n).width=t>>>0}function pf(n){return c(n).height}function yf(n,t){c(n).height=t>>>0}function hf(){return L((function(n,t,r,e){const u=c(n).getContext(g(t,r),c(e));return w(u)?0:_(u)}),arguments)}function vf(n){return c(n).videoWidth}function xf(n){return c(n).videoHeight}function Sf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Af(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Tf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function If(n){return c(n).x}function Pf(n){return c(n).y}function Df(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return L((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Of(){return L((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Lf(){return _(new Object)}function kf(){return L((function(){return _(self.self)}),arguments)}function Cf(){return L((function(){return _(window.window)}),arguments)}function Vf(){return L((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,r){return c(n).includes(c(t),r)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,r){return _(new Int8Array(c(n),t>>>0,r>>>0))}function Hf(n,t,r){return _(new Int16Array(c(n),t>>>0,r>>>0))}function Jf(n,t,r){return _(new Int32Array(c(n),t>>>0,r>>>0))}function zf(n,t,r){return _(new Uint8Array(c(n),t>>>0,r>>>0))}function Zf(n,t,r){return _(new Uint16Array(c(n),t>>>0,r>>>0))}function $f(n,t,r){return _(new Uint32Array(c(n),t>>>0,r>>>0))}function nc(n,t,r){return _(new Float32Array(c(n),t>>>0,r>>>0))}function tc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function rc(n,t){const r=v(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ec(n,t){throw new Error(g(n,t))}function uc(){return _(e.memory)}function fc(n,t,r){return _(x(n,t,76,S))}function cc(n,t,r){return _(x(n,t,76,S))}function oc(n,t,r){return _(x(n,t,76,A))}function ic(n,t,r){return _(x(n,t,76,S))}function _c(n,t,r){return _(x(n,t,76,S))}function dc(n,t,r){return _(x(n,t,76,S))}function ac(n,t,r){return _(x(n,t,76,S))}function bc(n,t,r){return _(x(n,t,76,S))}function gc(n,t,r){return _(x(n,t,76,S))}function wc(n,t,r){return _(x(n,t,231,T))}function sc(n,t,r){return _(x(n,t,231,I))}function lc(n,t,r){return _(x(n,t,231,I))}function mc(n,t,r){return _(x(n,t,231,I))}function pc(n,t,r){return _(x(n,t,231,I))}function yc(n,t,r){return _(x(n,t,231,I))}function hc(n,t,r){return _(x(n,t,231,I))}function vc(n,t,r){return _(x(n,t,231,I))}function xc(n,t,r){return _(x(n,t,231,I))}function Sc(n,t,r){return _(x(n,t,296,P))}function Ac(n,t,r){return _(x(n,t,568,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),O=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===R)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[O]:void 0}}),C)i[e]&&w(i[e],O,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:k&&O,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a({openGroupIndex:0}),created(){this.refreshIndex()},watch:{$route(){this.refreshIndex()}},methods:{refreshIndex(){const t=function(t,e){for(let a=0;a"page"===e.type&&Object(n.e)(t,e.path)))return a}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(n.e)(this.$route,t.regularPath)}}},o=a(7),l=Object(o.a)(r,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(a,s){return e("li",{key:s},["group"===a.type?e("SidebarGroup",{attrs:{item:a,open:s===t.openGroupIndex,collapsable:a.collapsable||a.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(s)}}}):e("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:a}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},297:function(t,e,a){"use strict";a.r(e);var s=a(261);function i(t,e,a,s){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:s,"sidebar-link":!0}},a)}function n(t,e,a,r,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const c=Object(s.e)(r,a+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,a+"#"+e.slug,e.title,c),n(t,e.children,a,r,o,l+1)])}))}var r={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:a,$route:r,$themeConfig:o,$themeLocaleConfig:l},props:{item:c,sidebarDepth:d}}){const p=Object(s.e)(r,c.path),u="auto"===c.type?p||c.children.some(t=>Object(s.e)(r,c.basePath+"#"+t.slug)):p,h="external"===c.type?function(t,e,a){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[a,t("OutboundLink")])}(t,c.path,c.title||c.path):i(t,c.path,c.title||c.path,u),b=e.frontmatter.sidebarDepth||d||l.sidebarDepth||o.sidebarDepth,f=null==b?1:b,v=l.displayAllHeaders||o.displayAllHeaders;if("auto"===c.type)return[h,n(t,c.children,c.basePath,r,f)];if((u||v)&&c.headers&&!s.d.test(c.path)){return[h,n(t,Object(s.c)(c.headers),c.path,r,f)]}return h}},o=(a(294),a(7)),l=Object(o.a)(r,void 0,void 0,!1,null,null,null);e.default=l.exports},298:function(t,e,a){},301:function(t,e,a){},302:function(t,e,a){"use strict";a(292)},303:function(t,e,a){},305:function(t,e,a){"use strict";a.r(e);var s=a(261),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:a(287).default},beforeCreate(){this.$options.components.SidebarLinks=a(295).default},methods:{isActive:s.e}},n=(a(302),a(7)),r=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("router-link",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,sidebarDepth:t.item.sidebarDepth,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=r.exports},306:function(t,e,a){"use strict";a(298)},308:function(t,e,a){"use strict";a(301)},309:function(t,e,a){"use strict";a(303)},314:function(t,e,a){},315:function(t,e,a){},318:function(t,e,a){"use strict";a.r(e);var s={components:{NavLink:a(286).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(a(306),a(7)),n=Object(i.a)(s,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v(t._s(t.data.heroText||t.$title||"Hello"))]):t._e(),t._v(" "),e("p",{staticClass:"description"},[t._v(t._s(t.data.tagline||t.$description||"Welcome to your VuePress site"))]),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(a,s){return e("div",{key:s,staticClass:"feature"},[e("h2",[t._v(t._s(a.title))]),t._v(" "),e("p",[t._v(t._s(a.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v(t._s(t.data.footer))]):t._e()],1)}),[],!1,null,null,null);e.default=n.exports},319:function(t,e,a){"use strict";a.r(e);a(93);var s=a(261);function i(t,e,a){const s=[];!function t(e,a){for(let s=0,i=e.length;s({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(o.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,a=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(a)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}},c=(a(326),a(327),a(7)),d=Object(c.a)(l,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("div",{staticClass:"docs-layout"},[e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar}},[t._t("sidebar-top",null,{slot:"top"}),t._v(" "),t._t("sidebar-bottom",null,{slot:"bottom"})],2),t._v(" "),e("Page",{attrs:{"sidebar-items":t.sidebarItems}},[t._t("page-top",null,{slot:"top"}),t._v(" "),t._t("page-bottom",null,{slot:"bottom"})],2)],1)],1)}),[],!1,null,null,null);e.default=d.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{290:function(t,e,a){},292:function(t,e,a){},294:function(t,e,a){"use strict";a(290)},295:function(t,e,a){"use strict";a.r(e);var s=a(305),i=a(297),n=a(261);var r={name:"SidebarLinks",components:{SidebarGroup:s.default,SidebarLink:i.default},props:["items","depth","sidebarDepth"],data:()=>({openGroupIndex:0}),created(){this.refreshIndex()},watch:{$route(){this.refreshIndex()}},methods:{refreshIndex(){const t=function(t,e){for(let a=0;a"page"===e.type&&Object(n.e)(t,e.path)))return a}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(n.e)(this.$route,t.regularPath)}}},o=a(7),l=Object(o.a)(r,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(a,s){return e("li",{key:s},["group"===a.type?e("SidebarGroup",{attrs:{item:a,open:s===t.openGroupIndex,collapsable:a.collapsable||a.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(s)}}}):e("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:a}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},297:function(t,e,a){"use strict";a.r(e);var s=a(261);function i(t,e,a,s){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:s,"sidebar-link":!0}},a)}function n(t,e,a,r,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const c=Object(s.e)(r,a+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,a+"#"+e.slug,e.title,c),n(t,e.children,a,r,o,l+1)])}))}var r={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:a,$route:r,$themeConfig:o,$themeLocaleConfig:l},props:{item:c,sidebarDepth:d}}){const p=Object(s.e)(r,c.path),u="auto"===c.type?p||c.children.some(t=>Object(s.e)(r,c.basePath+"#"+t.slug)):p,h="external"===c.type?function(t,e,a){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[a,t("OutboundLink")])}(t,c.path,c.title||c.path):i(t,c.path,c.title||c.path,u),b=e.frontmatter.sidebarDepth||d||l.sidebarDepth||o.sidebarDepth,f=null==b?1:b,v=l.displayAllHeaders||o.displayAllHeaders;if("auto"===c.type)return[h,n(t,c.children,c.basePath,r,f)];if((u||v)&&c.headers&&!s.d.test(c.path)){return[h,n(t,Object(s.c)(c.headers),c.path,r,f)]}return h}},o=(a(294),a(7)),l=Object(o.a)(r,void 0,void 0,!1,null,null,null);e.default=l.exports},298:function(t,e,a){},301:function(t,e,a){},302:function(t,e,a){"use strict";a(292)},303:function(t,e,a){},305:function(t,e,a){"use strict";a.r(e);var s=a(261),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:a(287).default},beforeCreate(){this.$options.components.SidebarLinks=a(295).default},methods:{isActive:s.e}},n=(a(302),a(7)),r=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("router-link",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,sidebarDepth:t.item.sidebarDepth,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=r.exports},306:function(t,e,a){"use strict";a(298)},308:function(t,e,a){"use strict";a(301)},309:function(t,e,a){"use strict";a(303)},314:function(t,e,a){},315:function(t,e,a){},318:function(t,e,a){"use strict";a.r(e);var s={components:{NavLink:a(286).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(a(306),a(7)),n=Object(i.a)(s,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v(t._s(t.data.heroText||t.$title||"Hello"))]):t._e(),t._v(" "),e("p",{staticClass:"description"},[t._v(t._s(t.data.tagline||t.$description||"Welcome to your VuePress site"))]),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(a,s){return e("div",{key:s,staticClass:"feature"},[e("h2",[t._v(t._s(a.title))]),t._v(" "),e("p",[t._v(t._s(a.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v(t._s(t.data.footer))]):t._e()],1)}),[],!1,null,null,null);e.default=n.exports},319:function(t,e,a){"use strict";a.r(e);a(92);var s=a(261);function i(t,e,a){const s=[];!function t(e,a){for(let s=0,i=e.length;s({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(o.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,a=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(a)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}},c=(a(326),a(327),a(7)),d=Object(c.a)(l,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("div",{staticClass:"docs-layout"},[e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar}},[t._t("sidebar-top",null,{slot:"top"}),t._v(" "),t._t("sidebar-bottom",null,{slot:"bottom"})],2),t._v(" "),e("Page",{attrs:{"sidebar-items":t.sidebarItems}},[t._t("page-top",null,{slot:"top"}),t._v(" "),t._t("page-bottom",null,{slot:"bottom"})],2)],1)],1)}),[],!1,null,null,null);e.default=d.exports}}]); \ No newline at end of file diff --git a/assets/js/20.06cc413d.js b/assets/js/20.06cc413d.js new file mode 100644 index 00000000..d8b58af1 --- /dev/null +++ b/assets/js/20.06cc413d.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{256:function(n,t,e){"use strict";(function(n){e.d(t,"Se",(function(){return u})),e.d(t,"ch",(function(){return E})),e.d(t,"Yg",(function(){return O})),e.d(t,"xg",(function(){return C})),e.d(t,"Xg",(function(){return V})),e.d(t,"ah",(function(){return U})),e.d(t,"Yd",(function(){return W})),e.d(t,"cf",(function(){return j})),e.d(t,"Ic",(function(){return q})),e.d(t,"Vg",(function(){return K})),e.d(t,"Zg",(function(){return Y})),e.d(t,"wg",(function(){return G})),e.d(t,"Wg",(function(){return N})),e.d(t,"Fd",(function(){return Q})),e.d(t,"k",(function(){return X})),e.d(t,"l",(function(){return H})),e.d(t,"s",(function(){return J})),e.d(t,"w",(function(){return z})),e.d(t,"H",(function(){return Z})),e.d(t,"J",(function(){return $})),e.d(t,"I",(function(){return nn})),e.d(t,"M",(function(){return tn})),e.d(t,"V",(function(){return en})),e.d(t,"W",(function(){return rn})),e.d(t,"X",(function(){return un})),e.d(t,"Y",(function(){return fn})),e.d(t,"ab",(function(){return cn})),e.d(t,"jb",(function(){return on})),e.d(t,"kb",(function(){return _n})),e.d(t,"mb",(function(){return dn})),e.d(t,"lb",(function(){return an})),e.d(t,"nb",(function(){return bn})),e.d(t,"qb",(function(){return gn})),e.d(t,"yb",(function(){return wn})),e.d(t,"Bb",(function(){return sn})),e.d(t,"Hb",(function(){return ln})),e.d(t,"Tb",(function(){return mn})),e.d(t,"Wb",(function(){return pn})),e.d(t,"Zb",(function(){return yn})),e.d(t,"dc",(function(){return hn})),e.d(t,"uc",(function(){return vn})),e.d(t,"yc",(function(){return xn})),e.d(t,"Ac",(function(){return Sn})),e.d(t,"Fc",(function(){return An})),e.d(t,"Jc",(function(){return Tn})),e.d(t,"Oc",(function(){return In})),e.d(t,"Wc",(function(){return Pn})),e.d(t,"ad",(function(){return Dn})),e.d(t,"od",(function(){return En})),e.d(t,"pd",(function(){return Fn})),e.d(t,"Hd",(function(){return Bn})),e.d(t,"we",(function(){return Rn})),e.d(t,"ze",(function(){return Mn})),e.d(t,"ye",(function(){return Ln})),e.d(t,"Ce",(function(){return kn})),e.d(t,"Ie",(function(){return On})),e.d(t,"Je",(function(){return Cn})),e.d(t,"qf",(function(){return Vn})),e.d(t,"rf",(function(){return Un})),e.d(t,"wf",(function(){return Wn})),e.d(t,"vf",(function(){return jn})),e.d(t,"sf",(function(){return qn})),e.d(t,"uf",(function(){return Kn})),e.d(t,"tf",(function(){return Yn})),e.d(t,"yf",(function(){return Gn})),e.d(t,"Cf",(function(){return Nn})),e.d(t,"zf",(function(){return Qn})),e.d(t,"Bf",(function(){return Xn})),e.d(t,"Af",(function(){return Hn})),e.d(t,"Jf",(function(){return Jn})),e.d(t,"Mf",(function(){return zn})),e.d(t,"Of",(function(){return Zn})),e.d(t,"Qf",(function(){return $n})),e.d(t,"Tf",(function(){return nt})),e.d(t,"Wf",(function(){return tt})),e.d(t,"Xf",(function(){return et})),e.d(t,"Yf",(function(){return rt})),e.d(t,"ag",(function(){return ut})),e.d(t,"dg",(function(){return ft})),e.d(t,"hg",(function(){return ct})),e.d(t,"ig",(function(){return ot})),e.d(t,"a",(function(){return it})),e.d(t,"i",(function(){return _t})),e.d(t,"m",(function(){return dt})),e.d(t,"p",(function(){return at})),e.d(t,"q",(function(){return bt})),e.d(t,"t",(function(){return gt})),e.d(t,"x",(function(){return wt})),e.d(t,"B",(function(){return st})),e.d(t,"z",(function(){return lt})),e.d(t,"F",(function(){return mt})),e.d(t,"E",(function(){return pt})),e.d(t,"fb",(function(){return yt})),e.d(t,"gb",(function(){return ht})),e.d(t,"ob",(function(){return vt})),e.d(t,"rb",(function(){return xt})),e.d(t,"ub",(function(){return St})),e.d(t,"wb",(function(){return At})),e.d(t,"zb",(function(){return Tt})),e.d(t,"Cb",(function(){return It})),e.d(t,"Eb",(function(){return Pt})),e.d(t,"Lb",(function(){return Dt})),e.d(t,"Nb",(function(){return Et})),e.d(t,"Pb",(function(){return Ft})),e.d(t,"Rb",(function(){return Bt})),e.d(t,"Ub",(function(){return Rt})),e.d(t,"Xb",(function(){return Mt})),e.d(t,"ac",(function(){return Lt})),e.d(t,"ic",(function(){return kt})),e.d(t,"jc",(function(){return Ot})),e.d(t,"lc",(function(){return Ct})),e.d(t,"rc",(function(){return Vt})),e.d(t,"oc",(function(){return Ut})),e.d(t,"vc",(function(){return Wt})),e.d(t,"Dc",(function(){return jt})),e.d(t,"Cc",(function(){return qt})),e.d(t,"Kc",(function(){return Kt})),e.d(t,"Nc",(function(){return Yt})),e.d(t,"Rc",(function(){return Gt})),e.d(t,"Tc",(function(){return Nt})),e.d(t,"Zc",(function(){return Qt})),e.d(t,"cd",(function(){return Xt})),e.d(t,"fd",(function(){return Ht})),e.d(t,"hd",(function(){return Jt})),e.d(t,"id",(function(){return zt})),e.d(t,"kd",(function(){return Zt})),e.d(t,"md",(function(){return $t})),e.d(t,"rd",(function(){return ne})),e.d(t,"Md",(function(){return te})),e.d(t,"ne",(function(){return ee})),e.d(t,"re",(function(){return re})),e.d(t,"Ee",(function(){return ue})),e.d(t,"Le",(function(){return fe})),e.d(t,"Xe",(function(){return ce})),e.d(t,"ef",(function(){return oe})),e.d(t,"hf",(function(){return ie})),e.d(t,"gf",(function(){return _e})),e.d(t,"kf",(function(){return de})),e.d(t,"pf",(function(){return ae})),e.d(t,"Gf",(function(){return be})),e.d(t,"If",(function(){return ge})),e.d(t,"Sf",(function(){return we})),e.d(t,"fg",(function(){return se})),e.d(t,"jg",(function(){return le})),e.d(t,"og",(function(){return me})),e.d(t,"Vc",(function(){return pe})),e.d(t,"Ge",(function(){return ye})),e.d(t,"Ne",(function(){return he})),e.d(t,"Oe",(function(){return ve})),e.d(t,"Gd",(function(){return xe})),e.d(t,"sc",(function(){return Se})),e.d(t,"Dd",(function(){return Ae})),e.d(t,"Cd",(function(){return Te})),e.d(t,"nc",(function(){return Ie})),e.d(t,"Pd",(function(){return Pe})),e.d(t,"ud",(function(){return De})),e.d(t,"S",(function(){return Ee})),e.d(t,"Fe",(function(){return Fe})),e.d(t,"Z",(function(){return Be})),e.d(t,"Qe",(function(){return Re})),e.d(t,"Sc",(function(){return Me})),e.d(t,"tb",(function(){return Le})),e.d(t,"Yc",(function(){return ke})),e.d(t,"ve",(function(){return Oe})),e.d(t,"mf",(function(){return Ce})),e.d(t,"K",(function(){return Ve})),e.d(t,"L",(function(){return Ue})),e.d(t,"N",(function(){return We})),e.d(t,"ib",(function(){return je})),e.d(t,"xe",(function(){return qe})),e.d(t,"xf",(function(){return Ke})),e.d(t,"Kf",(function(){return Ye})),e.d(t,"Lf",(function(){return Ge})),e.d(t,"Nf",(function(){return Ne})),e.d(t,"Pf",(function(){return Qe})),e.d(t,"Uf",(function(){return Xe})),e.d(t,"Vf",(function(){return He})),e.d(t,"Zf",(function(){return Je})),e.d(t,"bg",(function(){return ze})),e.d(t,"cg",(function(){return Ze})),e.d(t,"b",(function(){return $e})),e.d(t,"j",(function(){return nr})),e.d(t,"n",(function(){return tr})),e.d(t,"o",(function(){return er})),e.d(t,"r",(function(){return rr})),e.d(t,"u",(function(){return ur})),e.d(t,"y",(function(){return fr})),e.d(t,"C",(function(){return cr})),e.d(t,"A",(function(){return or})),e.d(t,"G",(function(){return ir})),e.d(t,"D",(function(){return _r})),e.d(t,"eb",(function(){return dr})),e.d(t,"hb",(function(){return ar})),e.d(t,"pb",(function(){return br})),e.d(t,"sb",(function(){return gr})),e.d(t,"vb",(function(){return wr})),e.d(t,"xb",(function(){return sr})),e.d(t,"Ab",(function(){return lr})),e.d(t,"Db",(function(){return mr})),e.d(t,"Fb",(function(){return pr})),e.d(t,"Kb",(function(){return yr})),e.d(t,"Ob",(function(){return hr})),e.d(t,"Qb",(function(){return vr})),e.d(t,"Sb",(function(){return xr})),e.d(t,"Vb",(function(){return Sr})),e.d(t,"Yb",(function(){return Ar})),e.d(t,"bc",(function(){return Tr})),e.d(t,"hc",(function(){return Ir})),e.d(t,"kc",(function(){return Pr})),e.d(t,"mc",(function(){return Dr})),e.d(t,"qc",(function(){return Er})),e.d(t,"pc",(function(){return Fr})),e.d(t,"wc",(function(){return Br})),e.d(t,"Ec",(function(){return Rr})),e.d(t,"Bc",(function(){return Mr})),e.d(t,"Lc",(function(){return Lr})),e.d(t,"Mc",(function(){return kr})),e.d(t,"Qc",(function(){return Or})),e.d(t,"Uc",(function(){return Cr})),e.d(t,"dd",(function(){return Vr})),e.d(t,"ed",(function(){return Ur})),e.d(t,"gd",(function(){return Wr})),e.d(t,"jd",(function(){return jr})),e.d(t,"ld",(function(){return qr})),e.d(t,"qd",(function(){return Kr})),e.d(t,"Nd",(function(){return Yr})),e.d(t,"me",(function(){return Gr})),e.d(t,"qe",(function(){return Nr})),e.d(t,"De",(function(){return Qr})),e.d(t,"Ke",(function(){return Xr})),e.d(t,"Ye",(function(){return Hr})),e.d(t,"df",(function(){return Jr})),e.d(t,"if",(function(){return zr})),e.d(t,"ff",(function(){return Zr})),e.d(t,"jf",(function(){return $r})),e.d(t,"of",(function(){return nu})),e.d(t,"Ff",(function(){return tu})),e.d(t,"Hf",(function(){return eu})),e.d(t,"Rf",(function(){return ru})),e.d(t,"eg",(function(){return uu})),e.d(t,"kg",(function(){return fu})),e.d(t,"ng",(function(){return cu})),e.d(t,"U",(function(){return ou})),e.d(t,"Jd",(function(){return iu})),e.d(t,"f",(function(){return _u})),e.d(t,"Jb",(function(){return du})),e.d(t,"Ze",(function(){return au})),e.d(t,"Sd",(function(){return bu})),e.d(t,"Kd",(function(){return gu})),e.d(t,"db",(function(){return wu})),e.d(t,"bd",(function(){return su})),e.d(t,"nd",(function(){return lu})),e.d(t,"xc",(function(){return mu})),e.d(t,"ug",(function(){return pu})),e.d(t,"vg",(function(){return yu})),e.d(t,"Mb",(function(){return hu})),e.d(t,"Gc",(function(){return vu})),e.d(t,"Hc",(function(){return xu})),e.d(t,"Bd",(function(){return Su})),e.d(t,"Od",(function(){return Au})),e.d(t,"pg",(function(){return Tu})),e.d(t,"h",(function(){return Iu})),e.d(t,"oe",(function(){return Pu})),e.d(t,"se",(function(){return Du})),e.d(t,"pe",(function(){return Eu})),e.d(t,"v",(function(){return Fu})),e.d(t,"Gb",(function(){return Bu})),e.d(t,"cc",(function(){return Ru})),e.d(t,"Ed",(function(){return Mu})),e.d(t,"sg",(function(){return Lu})),e.d(t,"We",(function(){return ku})),e.d(t,"xd",(function(){return Ou})),e.d(t,"Ue",(function(){return Cu})),e.d(t,"Xc",(function(){return Vu})),e.d(t,"rg",(function(){return Uu})),e.d(t,"Ve",(function(){return Wu})),e.d(t,"zd",(function(){return ju})),e.d(t,"Te",(function(){return qu})),e.d(t,"Pc",(function(){return Ku})),e.d(t,"fc",(function(){return Yu})),e.d(t,"gc",(function(){return Gu})),e.d(t,"ec",(function(){return Nu})),e.d(t,"Pe",(function(){return Qu})),e.d(t,"qg",(function(){return Xu})),e.d(t,"yd",(function(){return Hu})),e.d(t,"bf",(function(){return Ju})),e.d(t,"Ef",(function(){return zu})),e.d(t,"Wd",(function(){return Zu})),e.d(t,"tc",(function(){return $u})),e.d(t,"zc",(function(){return nf})),e.d(t,"gg",(function(){return tf})),e.d(t,"nf",(function(){return ef})),e.d(t,"T",(function(){return rf})),e.d(t,"te",(function(){return uf})),e.d(t,"lf",(function(){return ff})),e.d(t,"c",(function(){return cf})),e.d(t,"d",(function(){return of})),e.d(t,"Ae",(function(){return _f})),e.d(t,"mg",(function(){return df})),e.d(t,"lg",(function(){return af})),e.d(t,"bb",(function(){return bf})),e.d(t,"cb",(function(){return gf})),e.d(t,"ke",(function(){return wf})),e.d(t,"le",(function(){return sf})),e.d(t,"Ib",(function(){return lf})),e.d(t,"af",(function(){return mf})),e.d(t,"g",(function(){return pf})),e.d(t,"Td",(function(){return yf})),e.d(t,"P",(function(){return hf})),e.d(t,"Q",(function(){return vf})),e.d(t,"Ud",(function(){return xf})),e.d(t,"Vd",(function(){return Sf})),e.d(t,"Qd",(function(){return Af})),e.d(t,"e",(function(){return Tf})),e.d(t,"Be",(function(){return If})),e.d(t,"Rd",(function(){return Pf})),e.d(t,"ie",(function(){return Df})),e.d(t,"sd",(function(){return Ef})),e.d(t,"Ld",(function(){return Ff})),e.d(t,"Xd",(function(){return Bf})),e.d(t,"ae",(function(){return Rf})),e.d(t,"td",(function(){return Mf})),e.d(t,"R",(function(){return Lf})),e.d(t,"Zd",(function(){return kf})),e.d(t,"Me",(function(){return Of})),e.d(t,"tg",(function(){return Cf})),e.d(t,"vd",(function(){return Vf})),e.d(t,"wd",(function(){return Uf})),e.d(t,"Tg",(function(){return Wf})),e.d(t,"Ad",(function(){return jf})),e.d(t,"je",(function(){return qf})),e.d(t,"ue",(function(){return Kf})),e.d(t,"Id",(function(){return Yf})),e.d(t,"He",(function(){return Gf})),e.d(t,"Df",(function(){return Nf})),e.d(t,"O",(function(){return Qf})),e.d(t,"ge",(function(){return Xf})),e.d(t,"fe",(function(){return Hf})),e.d(t,"he",(function(){return Jf})),e.d(t,"de",(function(){return zf})),e.d(t,"be",(function(){return Zf})),e.d(t,"ee",(function(){return $f})),e.d(t,"ce",(function(){return nc})),e.d(t,"Re",(function(){return tc})),e.d(t,"Sg",(function(){return ec})),e.d(t,"bh",(function(){return rc})),e.d(t,"Ug",(function(){return uc})),e.d(t,"zg",(function(){return fc})),e.d(t,"Ag",(function(){return cc})),e.d(t,"Bg",(function(){return oc})),e.d(t,"Cg",(function(){return ic})),e.d(t,"Dg",(function(){return _c})),e.d(t,"Eg",(function(){return dc})),e.d(t,"Fg",(function(){return ac})),e.d(t,"Gg",(function(){return bc})),e.d(t,"Hg",(function(){return gc})),e.d(t,"Ig",(function(){return wc})),e.d(t,"Jg",(function(){return sc})),e.d(t,"Kg",(function(){return lc})),e.d(t,"Lg",(function(){return mc})),e.d(t,"Mg",(function(){return pc})),e.d(t,"Ng",(function(){return yc})),e.d(t,"Og",(function(){return hc})),e.d(t,"Pg",(function(){return vc})),e.d(t,"Qg",(function(){return xc})),e.d(t,"Rg",(function(){return Sc})),e.d(t,"yg",(function(){return Ac}));e(92),e(263),e(267),e(270),e(271),e(274),e(276),e(278),e(99),e(282),e(284);let r;function u(n){r=n}const f=new Array(128).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);let o=f.length;function i(n){const t=c(n);return function(n){n<132||(f[n]=o,o=n)}(n),t}function _(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let d=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});d.decode();let a=null;function b(){return null!==a&&0!==a.byteLength||(a=new Uint8Array(r.memory.buffer)),a}function g(n,t){return n>>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const e=y.encode(n);return t.set(e),{read:n.length,written:e.length}};function v(n,t,e){if(void 0===e){const e=y.encode(n),r=t(e.length,1)>>>0;return b().subarray(r,r+e.length).set(e),p=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==r){0!==c&&(n=n.slice(c)),u=e(u,r,r=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+r);c+=h(n,t).written}return p=c,u}function x(n,t,e,u){const f={a:n,b:t,cnt:1,dtor:e},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?r.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3a3bc7655ebfa223(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h558dd1661ca86cb3(n,t)}function T(n,t){r.wasm_bindgen__convert__closures__invoke0_mut__h0b11277e689fa307(n,t)}function I(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__h149c27ce6de9c372(n,t,_(e))}function P(n,t,e){r.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,_(e))}function E(){r.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function L(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(r.memory.buffer)),M).subarray(n/4,n/4+t)}function k(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function O(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const e=v(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function q(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function K(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(r.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,e){c(n).beginQuery(t>>>0,c(e))}function H(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function J(n,t,e){c(n).bindSampler(t>>>0,c(e))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,e,r,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function nn(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function tn(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function en(n,t,e,r,u){c(n).clearBufferfi(t>>>0,e,r,u)}function rn(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,B(r,u))}function un(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,R(r,u))}function fn(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,L(r,u))}function cn(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function on(n,t,e,r,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_,d)}function _n(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function dn(n,t,e,r,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a,b)}function an(n,t,e,r,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gn(n,t,e,r,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return w(r)?0:_(r)}function In(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Pn(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dn(){return k((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function En(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Fn(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Bn(){return k((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,i)}),arguments)}function kn(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function On(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Cn(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Vn(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Un(n,t,e,r,u,f,o){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,o)}function Wn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return k((function(n,t,e,r,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,e,r){c(n).uniform2fv(c(t),B(e,r))}function zn(n,t,e,r){c(n).uniform2iv(c(t),R(e,r))}function Zn(n,t,e,r){c(n).uniform3fv(c(t),B(e,r))}function $n(n,t,e,r){c(n).uniform3iv(c(t),R(e,r))}function nt(n,t,e,r){c(n).uniform4fv(c(t),B(e,r))}function tt(n,t,e,r){c(n).uniform4iv(c(t),R(e,r))}function et(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function rt(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,B(r,u))}function ut(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,B(r,u))}function ft(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,B(r,u))}function ct(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ot(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,e){c(n).attachShader(c(t),c(e))}function dt(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function at(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function bt(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function gt(n,t,e){c(n).bindTexture(t>>>0,c(e))}function wt(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function mt(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function pt(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yt(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Bt(n,t){c(n).deleteProgram(c(t))}function Rt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function kt(n,t){c(n).depthFunc(t>>>0)}function Ot(n,t){c(n).depthMask(0!==t)}function Ct(n,t,e){c(n).depthRange(t,e)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yt(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Qt(){return k((function(n,t,e){const r=c(n).getExtension(g(t,e));return w(r)?0:_(r)}),arguments)}function Xt(){return k((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function zt(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function ne(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function te(n,t){c(n).linkProgram(c(t))}function ee(n,t,e){c(n).pixelStorei(t>>>0,e)}function re(n,t,e){c(n).polygonOffset(t,e)}function ue(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function fe(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ce(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function oe(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function ie(n,t){c(n).stencilMask(t>>>0)}function _e(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function de(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ae(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function be(n,t,e){c(n).uniform1f(c(t),e)}function ge(n,t,e){c(n).uniform1i(c(t),e)}function we(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function se(n,t){c(n).useProgram(c(t))}function le(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function me(n,t,e,r,u){c(n).viewport(t,e,r,u)}function pe(n){return _(c(n).getBoundingClientRect())}function ye(){return k((function(n){c(n).requestFullscreen()}),arguments)}function he(){return k((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ve(){return k((function(n,t){c(n).setPointerCapture(t)}),arguments)}function xe(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Se(n){const t=c(n).document;return w(t)?0:_(t)}function Ae(){return k((function(n){return _(c(n).innerWidth)}),arguments)}function Te(){return k((function(n){return _(c(n).innerHeight)}),arguments)}function Ie(n){return c(n).devicePixelRatio}function Pe(){return k((function(n,t,e){const r=c(n).matchMedia(g(t,e));return w(r)?0:_(r)}),arguments)}function De(n,t,e){const r=c(n)[g(t,e)];return w(r)?0:_(r)}function Ee(){return k((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Fe(){return k((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Be(n,t){c(n).clearTimeout(t)}function Re(){return k((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Me(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Le(){return k((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function ke(n,t,e){const r=c(n).getElementById(g(t,e));return w(r)?0:_(r)}function Oe(){return k((function(n,t,e){const r=c(n).querySelector(g(t,e));return w(r)?0:_(r)}),arguments)}function Ce(n){return _(c(n).style)}function Ve(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ue(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function We(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function je(n,t,e,r,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,o,i>>>0,c(_))}function qe(){return k((function(n,t,e,r,u,f,o,i){c(n).readPixels(t,e,r,u,f>>>0,o>>>0,c(i))}),arguments)}function Ke(){return k((function(n,t,e,r,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Ye(n,t,e,r){c(n).uniform2fv(c(t),B(e,r))}function Ge(n,t,e,r){c(n).uniform2iv(c(t),R(e,r))}function Ne(n,t,e,r){c(n).uniform3fv(c(t),B(e,r))}function Qe(n,t,e,r){c(n).uniform3iv(c(t),R(e,r))}function Xe(n,t,e,r){c(n).uniform4fv(c(t),B(e,r))}function He(n,t,e,r){c(n).uniform4iv(c(t),R(e,r))}function Je(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,B(r,u))}function ze(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,B(r,u))}function Ze(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,B(r,u))}function $e(n,t){c(n).activeTexture(t>>>0)}function nr(n,t,e){c(n).attachShader(c(t),c(e))}function tr(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function er(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function rr(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function ur(n,t,e){c(n).bindTexture(t>>>0,c(e))}function fr(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function cr(n,t){c(n).blendEquation(t>>>0)}function or(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function ir(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function _r(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function dr(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ar(n,t){c(n).compileShader(c(t))}function br(n,t,e,r,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,o,i,_)}function gr(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function wr(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function sr(n){const t=c(n).createProgram();return w(t)?0:_(t)}function lr(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function mr(n,t){const e=c(n).createShader(t>>>0);return w(e)?0:_(e)}function pr(n){const t=c(n).createTexture();return w(t)?0:_(t)}function yr(n,t){c(n).cullFace(t>>>0)}function hr(n,t){c(n).deleteBuffer(c(t))}function vr(n,t){c(n).deleteFramebuffer(c(t))}function xr(n,t){c(n).deleteProgram(c(t))}function Sr(n,t){c(n).deleteRenderbuffer(c(t))}function Ar(n,t){c(n).deleteShader(c(t))}function Tr(n,t){c(n).deleteTexture(c(t))}function Ir(n,t){c(n).depthFunc(t>>>0)}function Pr(n,t){c(n).depthMask(0!==t)}function Dr(n,t,e){c(n).depthRange(t,e)}function Er(n,t){c(n).disable(t>>>0)}function Fr(n,t){c(n).disableVertexAttribArray(t>>>0)}function Br(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Rr(n,t){c(n).enable(t>>>0)}function Mr(n,t){c(n).enableVertexAttribArray(t>>>0)}function Lr(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function kr(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Or(n,t){c(n).frontFace(t>>>0)}function Cr(n,t,e){const r=c(n).getActiveUniform(c(t),e>>>0);return w(r)?0:_(r)}function Vr(){return k((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ur(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Wr(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function jr(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=w(u)?0:v(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qr(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function Kr(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return w(u)?0:_(u)}function Yr(n,t){c(n).linkProgram(c(t))}function Gr(n,t,e){c(n).pixelStorei(t>>>0,e)}function Nr(n,t,e){c(n).polygonOffset(t,e)}function Qr(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Xr(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Hr(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Jr(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function zr(n,t){c(n).stencilMask(t>>>0)}function Zr(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function $r(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function nu(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function tu(n,t,e){c(n).uniform1f(c(t),e)}function eu(n,t,e){c(n).uniform1i(c(t),e)}function ru(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,e,r,u,f,o){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,o)}function cu(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ou(n){return c(n).charCode}function iu(n){return c(n).keyCode}function _u(n){return c(n).altKey}function du(n){return c(n).ctrlKey}function au(n){return c(n).shiftKey}function bu(n){return c(n).metaKey}function gu(n,t){const e=v(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function wu(n,t){const e=v(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function su(n,t,e){return c(n).getModifierState(g(t,e))}function lu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function mu(n,t){c(n).drawBuffersWEBGL(c(t))}function pu(n){return c(n).x}function yu(n){return c(n).y}function hu(n){console.debug(c(n))}function vu(n){console.error(c(n))}function xu(n,t){console.error(c(n),c(t))}function Su(n){console.info(c(n))}function Au(n){console.log(c(n))}function Tu(n){console.warn(c(n))}function Iu(){return k((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Pu(n){return c(n).pointerId}function Du(n){return c(n).pressure}function Eu(n,t){const e=v(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function Fu(n,t){c(n).bindVertexArrayOES(c(t))}function Bu(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function Ru(n,t){c(n).deleteVertexArrayOES(c(t))}function Mu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Lu(n){return c(n).width}function ku(n,t){c(n).width=t>>>0}function Ou(n){return c(n).height}function Cu(n,t){c(n).height=t>>>0}function Vu(){return k((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return w(u)?0:_(u)}),arguments)}function Uu(n){return c(n).width}function Wu(n,t){c(n).width=t>>>0}function ju(n){return c(n).height}function qu(n,t){c(n).height=t>>>0}function Ku(n,t,e,r,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,o)}function Yu(n){return c(n).deltaX}function Gu(n){return c(n).deltaY}function Nu(n){return c(n).deltaMode}function Qu(){return k((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Xu(n){return c(n).width}function Hu(n){return c(n).height}function Ju(n){return c(n).size}function zu(n){return c(n).type}function Zu(n,t){const e=v(c(t).name,r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function $u(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function nf(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function tf(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function ef(n){const t=c(n).target;return w(t)?0:_(t)}function rf(n){return c(n).cancelBubble}function uf(n){c(n).preventDefault()}function ff(n){c(n).stopPropagation()}function cf(){return k((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function of(){return k((function(n,t,e,r,u){c(n).addEventListener(g(t,e),c(r),c(u))}),arguments)}function _f(){return k((function(n,t,e,r,u){c(n).removeEventListener(g(t,e),c(r),c(u))}),arguments)}function df(n){return c(n).videoWidth}function af(n){return c(n).videoHeight}function bf(n){return c(n).clientX}function gf(n){return c(n).clientY}function wf(n){return c(n).offsetX}function sf(n){return c(n).offsetY}function lf(n){return c(n).ctrlKey}function mf(n){return c(n).shiftKey}function pf(n){return c(n).altKey}function yf(n){return c(n).metaKey}function hf(n){return c(n).button}function vf(n){return c(n).buttons}function xf(n){return c(n).movementX}function Sf(n){return c(n).movementY}function Af(n){return c(n).matches}function Tf(){return k((function(n,t){c(n).addListener(c(t))}),arguments)}function If(){return k((function(n,t){c(n).removeListener(c(t))}),arguments)}function Pf(n){return c(n).matches}function Df(n){return c(n).now()}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Bf(){return _(new Array)}function Rf(n,t){return _(new Function(g(n,t)))}function Mf(){return k((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Lf(){return k((function(n,t){return _(c(n).call(c(t)))}),arguments)}function kf(){return _(new Object)}function Of(){return k((function(){return _(self.self)}),arguments)}function Cf(){return k((function(){return _(window.window)}),arguments)}function Vf(){return k((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return k((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,e){return c(n).includes(c(t),e)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function Hf(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Jf(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function zf(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function Zf(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function $f(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function nc(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function tc(){return k((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ec(n,t){const e=v(function n(t){const e=typeof t;if("number"==e||"boolean"==e||null==t)return""+t;if("string"==e)return`"${t}"`;if("symbol"==e){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==e){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const e=t.length;let r="[";e>0&&(r+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=r[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=e}function rc(n,t){throw new Error(g(n,t))}function uc(){return _(r.memory)}function fc(n,t,e){return _(x(n,t,106,S))}function cc(n,t,e){return _(x(n,t,106,A))}function oc(n,t,e){return _(x(n,t,106,S))}function ic(n,t,e){return _(x(n,t,106,S))}function _c(n,t,e){return _(x(n,t,106,S))}function dc(n,t,e){return _(x(n,t,106,S))}function ac(n,t,e){return _(x(n,t,106,S))}function bc(n,t,e){return _(x(n,t,106,S))}function gc(n,t,e){return _(x(n,t,106,S))}function wc(n,t,e){return _(x(n,t,337,T))}function sc(n,t,e){return _(x(n,t,337,I))}function lc(n,t,e){return _(x(n,t,337,I))}function mc(n,t,e){return _(x(n,t,337,I))}function pc(n,t,e){return _(x(n,t,337,I))}function yc(n,t,e){return _(x(n,t,337,I))}function hc(n,t,e){return _(x(n,t,337,I))}function vc(n,t,e){return _(x(n,t,337,I))}function xc(n,t,e){return _(x(n,t,337,I))}function Sc(n,t,e){return _(x(n,t,368,P))}function Ac(n,t,e){return _(x(n,t,631,D))}}).call(this,e(262)(n))},257:function(n,t,e){"use strict";var r,u,f,c=e(264),o=e(4),i=e(0),_=e(1),d=e(9),a=e(8),b=e(91),g=e(94),w=e(12),s=e(95),l=e(259),m=e(48),p=e(265),y=e(50),h=e(28),v=e(49),x=e(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),L=v("TYPED_ARRAY_TAG"),k=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var e=A(t);return e&&a(e,"TypedArrayConstructor")?e.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(r in C)(f=(u=i[r])&&u.prototype)?S(f).TypedArrayConstructor=u:k=!1;for(r in V)(f=(u=i[r])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!k||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},k))for(r in C)i[r]&&y(i[r],E);if((!k||!F||F===B)&&(F=E.prototype,k))for(r in C)i[r]&&y(i[r].prototype,F);if(k&&p(D)!==F&&y(D,F),o&&!a(F,M))for(r in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[L]:void 0}}),C)i[r]&&w(i[r],L,r);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:k,TYPED_ARRAY_TAG:O&&L,aTypedArray:function(n){if(W(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,e,r){if(o){if(e)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(e){try{f.prototype[n]=t}catch(n){}}}F[n]&&!e||s(F,n,e?t:k&&I[n]||t,r)}},exportTypedArrayStaticMethod:function(n,t,e){var r,u;if(o){if(y){if(e)for(r in C)if((u=i[r])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!e)return;try{return s(E,n,e?t:k&&E[n]||t)}catch(n){}}for(r in C)!(u=i[r])||u[n]&&!e||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,e){"use strict";var r=e(96),u=e(15);n.exports=function(n,t,e){return e.get&&r(e.get,t,{getter:!0}),e.set&&r(e.set,t,{setter:!0}),u.f(n,t,e)}},260:function(n,t,e){"use strict";var r=e(268),u=e(47),f=e(25),c=e(24),o=function(n){var t=1===n;return function(e,o,i){for(var _,d=f(e),a=u(d),b=c(a),g=r(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,e){"use strict";var r=e(257),u=e(24),f=e(46),c=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(n){var t=c(this),e=u(t),r=f(n),o=r>=0?r:e+r;return o<0||o>=e?void 0:t[o]}))},264:function(n,t,e){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,e){"use strict";var r=e(8),u=e(1),f=e(25),c=e(98),o=e(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(r(t,i))return t[i];var e=t.constructor;return u(e)&&t instanceof e?e.prototype:t instanceof _?d:null}},266:function(n,t,e){"use strict";var r=e(2);n.exports=!r((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,e){"use strict";var r=e(257),u=e(260).findLast,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,e){"use strict";var r=e(269),u=e(27),f=e(30),c=r(r.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,e){"use strict";var r=e(16),u=e(3);n.exports=function(n){if("Function"===r(n))return u(n)}},270:function(n,t,e){"use strict";var r=e(257),u=e(260).findLastIndex,f=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,e){"use strict";var r=e(0),u=e(29),f=e(257),c=e(24),o=e(272),i=e(25),_=e(2),d=r.RangeError,a=r.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),e=i(n);if(l)return u(g,this,e,t);var r=this.length,f=c(e),_=0;if(f+t>r)throw new d("Wrong length");for(;_2?e:r(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,e){"use strict";var r=e(279),u=e(257),f=e(280),c=e(46),o=e(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var e=i(this),u=c(n),d=f(e)?o(t):+t;return r(e,_(e),u,d)}}.with,!a)},279:function(n,t,e){"use strict";var r=e(24),u=e(46),f=RangeError;n.exports=function(n,t,e,c){var o=r(n),i=u(e),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>=0,d.decode(b().subarray(n,n+t))}function w(n){return null==n}let s=null;let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}let p=0;let y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const h="function"==typeof y.encodeInto?function(n,t){return y.encodeInto(n,t)}:function(n,t){const r=y.encode(n);return t.set(r),{read:n.length,written:r.length}};function v(n,t,r){if(void 0===r){const r=y.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),p=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=b();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=b().subarray(u+c,u+e);c+=h(n,t).written}return p=c,u}function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h16b9564f31a5f184(n,t,_(r))}function A(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h067632f18a64188a(n,t)}function T(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h193ea3234cb9c93e(n,t,_(r))}function I(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9c25938614955985(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,_(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,_(r))}function E(){e.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function B(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function O(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(_(n))}}function k(n){i(n)}function C(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function V(n){return _(c(n))}function U(n,t){return _(g(n,t))}function W(){return _(new Error)}function j(n,t){const r=v(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function q(n,t){let r,u;try{r=n,u=t,console.error(g(n,t))}finally{e.__wbindgen_free(r,u,1)}}function K(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==s&&0!==s.byteLength||(s=new Float64Array(e.memory.buffer)),s)[n/8+1]=w(u)?0:u,m()[n/4+0]=!w(u)}function Y(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function G(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function N(n){return _(n)}function Q(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function X(n,t,r){c(n).beginQuery(t>>>0,c(r))}function H(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function z(n,t){c(n).bindVertexArray(c(t))}function Z(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function $(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function tn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function rn(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function en(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,R(e,u))}function un(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,O(e,u))}function cn(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function on(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function _n(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function dn(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function an(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function bn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function gn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function wn(n){const t=c(n).createQuery();return w(t)?0:_(t)}function sn(n){const t=c(n).createSampler();return w(t)?0:_(t)}function ln(n){const t=c(n).createVertexArray();return w(t)?0:_(t)}function mn(n,t){c(n).deleteQuery(c(t))}function pn(n,t){c(n).deleteSampler(c(t))}function yn(n,t){c(n).deleteSync(c(t))}function hn(n,t){c(n).deleteVertexArray(c(t))}function vn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function xn(n,t){c(n).drawBuffers(c(t))}function Sn(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function An(n,t){c(n).endQuery(t>>>0)}function Tn(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return w(e)?0:_(e)}function In(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Pn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function Dn(){return L((function(n,t,r){return _(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function En(n,t,r){return _(c(n).getSyncParameter(c(t),r>>>0))}function Fn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),g(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Bn(n,t){c(n).readBuffer(t>>>0)}function Mn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function On(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function Ln(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function kn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Cn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Vn(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function Un(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function jn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function zn(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function et(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function ut(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function ct(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function ot(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function it(n,t){c(n).activeTexture(t>>>0)}function _t(n,t,r){c(n).attachShader(c(t),c(r))}function dt(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function at(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function wt(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function st(n,t){c(n).blendEquation(t>>>0)}function lt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function mt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function pt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function yt(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ht(n,t){c(n).compileShader(c(t))}function vt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function xt(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function St(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function At(n){const t=c(n).createProgram();return w(t)?0:_(t)}function Tt(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function It(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function Pt(n){const t=c(n).createTexture();return w(t)?0:_(t)}function Dt(n,t){c(n).cullFace(t>>>0)}function Et(n,t){c(n).deleteBuffer(c(t))}function Ft(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Bt(n,t){c(n).deleteRenderbuffer(c(t))}function Mt(n,t){c(n).deleteShader(c(t))}function Ot(n,t){c(n).deleteTexture(c(t))}function Lt(n,t){c(n).depthFunc(t>>>0)}function kt(n,t){c(n).depthMask(0!==t)}function Ct(n,t,r){c(n).depthRange(t,r)}function Vt(n,t){c(n).disable(t>>>0)}function Ut(n,t){c(n).disableVertexAttribArray(t>>>0)}function Wt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function jt(n,t){c(n).enable(t>>>0)}function qt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Kt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Yt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Gt(n,t){c(n).frontFace(t>>>0)}function Nt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Qt(){return L((function(n,t,r){const e=c(n).getExtension(g(t,r));return w(e)?0:_(e)}),arguments)}function Xt(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ht(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function Zt(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function $t(n){const t=c(n).getSupportedExtensions();return w(t)?0:_(t)}function nr(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function tr(n,t){c(n).linkProgram(c(t))}function rr(n,t,r){c(n).pixelStorei(t>>>0,r)}function er(n,t,r){c(n).polygonOffset(t,r)}function ur(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function fr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function cr(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function or(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ir(n,t){c(n).stencilMask(t>>>0)}function _r(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function dr(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ar(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function br(n,t,r){c(n).uniform1f(c(t),r)}function gr(n,t,r){c(n).uniform1i(c(t),r)}function wr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function sr(n,t){c(n).useProgram(c(t))}function lr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function mr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function pr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function yr(n){const t=c(n).document;return w(t)?0:_(t)}function hr(){return L((function(n){return _(c(n).innerWidth)}),arguments)}function vr(){return L((function(n){return _(c(n).innerHeight)}),arguments)}function xr(n){return c(n).devicePixelRatio}function Sr(){return L((function(n,t,r){const e=c(n).matchMedia(g(t,r));return w(e)?0:_(e)}),arguments)}function Ar(n,t,r){const e=c(n)[g(t,r)];return w(e)?0:_(e)}function Tr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ir(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Pr(n,t){c(n).clearTimeout(t)}function Dr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Er(n){const t=c(n).fullscreenElement;return w(t)?0:_(t)}function Fr(){return L((function(n,t,r){return _(c(n).createElement(g(t,r)))}),arguments)}function Rr(n,t,r){const e=c(n).getElementById(g(t,r));return w(e)?0:_(e)}function Br(){return L((function(n,t,r){const e=c(n).querySelector(g(t,r));return w(e)?0:_(e)}),arguments)}function Mr(n){return _(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Lr(){return L((function(n,t,r,e,u){c(n).setAttribute(g(t,r),g(e,u))}),arguments)}function kr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Cr(n){return _(c(n).style)}function Vr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Ur(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function jr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function qr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Kr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yr(n,t,r,e){c(n).uniform2fv(c(t),R(r,e))}function Gr(n,t,r,e){c(n).uniform2iv(c(t),B(r,e))}function Nr(n,t,r,e){c(n).uniform3fv(c(t),R(r,e))}function Qr(n,t,r,e){c(n).uniform3iv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform4fv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform4iv(c(t),B(r,e))}function Jr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,R(e,u))}function zr(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,R(e,u))}function Zr(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,R(e,u))}function $r(n,t){c(n).activeTexture(t>>>0)}function ne(n,t,r){c(n).attachShader(c(t),c(r))}function te(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function re(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ee(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindTexture(t>>>0,c(r))}function fe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ce(n,t){c(n).blendEquation(t>>>0)}function oe(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ie(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function _e(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function de(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ae(n,t){c(n).compileShader(c(t))}function be(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function ge(n){const t=c(n).createBuffer();return w(t)?0:_(t)}function we(n){const t=c(n).createFramebuffer();return w(t)?0:_(t)}function se(n){const t=c(n).createProgram();return w(t)?0:_(t)}function le(n){const t=c(n).createRenderbuffer();return w(t)?0:_(t)}function me(n,t){const r=c(n).createShader(t>>>0);return w(r)?0:_(r)}function pe(n){const t=c(n).createTexture();return w(t)?0:_(t)}function ye(n,t){c(n).cullFace(t>>>0)}function he(n,t){c(n).deleteBuffer(c(t))}function ve(n,t){c(n).deleteFramebuffer(c(t))}function xe(n,t){c(n).deleteProgram(c(t))}function Se(n,t){c(n).deleteRenderbuffer(c(t))}function Ae(n,t){c(n).deleteShader(c(t))}function Te(n,t){c(n).deleteTexture(c(t))}function Ie(n,t){c(n).depthFunc(t>>>0)}function Pe(n,t){c(n).depthMask(0!==t)}function De(n,t,r){c(n).depthRange(t,r)}function Ee(n,t){c(n).disable(t>>>0)}function Fe(n,t){c(n).disableVertexAttribArray(t>>>0)}function Re(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Be(n,t){c(n).enable(t>>>0)}function Me(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Le(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function ke(n,t){c(n).frontFace(t>>>0)}function Ce(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return w(e)?0:_(e)}function Ve(){return L((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function Ue(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function We(n,t,r){return _(c(n).getProgramParameter(c(t),r>>>0))}function je(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=w(u)?0:v(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=p;m()[n/4+1]=o,m()[n/4+0]=f}function qe(n,t,r){return _(c(n).getShaderParameter(c(t),r>>>0))}function Ke(n,t,r,e){const u=c(n).getUniformLocation(c(t),g(r,e));return w(u)?0:_(u)}function Ye(n,t){c(n).linkProgram(c(t))}function Ge(n,t,r){c(n).pixelStorei(t>>>0,r)}function Ne(n,t,r){c(n).polygonOffset(t,r)}function Qe(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Xe(n,t,r,e,u){c(n).scissor(t,r,e,u)}function He(n,t,r,e){c(n).shaderSource(c(t),g(r,e))}function Je(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function ze(n,t){c(n).stencilMask(t>>>0)}function Ze(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function $e(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function nu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function tu(n,t,r){c(n).uniform1f(c(t),r)}function ru(n,t,r){c(n).uniform1i(c(t),r)}function eu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function uu(n,t){c(n).useProgram(c(t))}function fu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function cu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function ou(){return L((function(n,t,r,e,u){c(n).setProperty(g(t,r),g(e,u))}),arguments)}function iu(){return L((function(n,t,r,e){c(n).addEventListener(g(t,r),c(e))}),arguments)}function _u(){return L((function(n,t,r,e,u){c(n).addEventListener(g(t,r),c(e),c(u))}),arguments)}function du(){return L((function(n,t,r,e,u){c(n).removeEventListener(g(t,r),c(e),c(u))}),arguments)}function au(){return L((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function bu(n){return c(n).matches}function gu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function wu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function su(n){return c(n).now()}function lu(n){return c(n).deltaX}function mu(n){return c(n).deltaY}function pu(n){return c(n).deltaMode}function yu(n){return c(n).width}function hu(n){return c(n).height}function vu(n){const t=c(n).getSupportedProfiles();return w(t)?0:_(t)}function xu(n){console.debug(c(n))}function Su(n){console.error(c(n))}function Au(n,t){console.error(c(n),c(t))}function Tu(n){console.info(c(n))}function Iu(n){console.log(c(n))}function Pu(n){console.warn(c(n))}function Du(n){return c(n).charCode}function Eu(n){return c(n).keyCode}function Fu(n){return c(n).altKey}function Ru(n){return c(n).ctrlKey}function Bu(n){return c(n).shiftKey}function Mu(n){return c(n).metaKey}function Ou(n,t){const r=v(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function Lu(n,t){const r=v(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ku(n,t,r){return c(n).getModifierState(g(t,r))}function Cu(n){return c(n).matches}function Vu(n){return c(n).pointerId}function Uu(n){return c(n).pressure}function Wu(n,t){const r=v(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ju(n){return c(n).width}function qu(n,t){c(n).width=t>>>0}function Ku(n){return c(n).height}function Yu(n,t){c(n).height=t>>>0}function Gu(n){const t=c(n).target;return w(t)?0:_(t)}function Nu(n){return c(n).cancelBubble}function Qu(n){c(n).preventDefault()}function Xu(n){c(n).stopPropagation()}function Hu(n){return c(n).clientX}function Ju(n){return c(n).clientY}function zu(n){return c(n).offsetX}function Zu(n){return c(n).offsetY}function $u(n){return c(n).ctrlKey}function nf(n){return c(n).shiftKey}function tf(n){return c(n).altKey}function rf(n){return c(n).metaKey}function ef(n){return c(n).button}function uf(n){return c(n).buttons}function ff(n){return c(n).movementX}function cf(n){return c(n).movementY}function of(n,t){c(n).bindVertexArrayOES(c(t))}function _f(n){const t=c(n).createVertexArrayOES();return w(t)?0:_(t)}function df(n,t){c(n).deleteVertexArrayOES(c(t))}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const r=v(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function wf(n,t){c(n).drawBuffersWEBGL(c(t))}function sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function lf(n){return c(n).width}function mf(n,t){c(n).width=t>>>0}function pf(n){return c(n).height}function yf(n,t){c(n).height=t>>>0}function hf(){return L((function(n,t,r,e){const u=c(n).getContext(g(t,r),c(e));return w(u)?0:_(u)}),arguments)}function vf(n){return c(n).videoWidth}function xf(n){return c(n).videoHeight}function Sf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Af(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Tf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function If(n){return c(n).x}function Pf(n){return c(n).y}function Df(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Ef(n,t){return _(c(n)[t>>>0])}function Ff(n){return c(n).length}function Rf(){return _(new Array)}function Bf(n,t){return _(new Function(g(n,t)))}function Mf(){return L((function(n,t){return _(Reflect.get(c(n),c(t)))}),arguments)}function Of(){return L((function(n,t){return _(c(n).call(c(t)))}),arguments)}function Lf(){return _(new Object)}function kf(){return L((function(){return _(self.self)}),arguments)}function Cf(){return L((function(){return _(window.window)}),arguments)}function Vf(){return L((function(){return _(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return _(global.global)}),arguments)}function Wf(n){return void 0===c(n)}function jf(n,t,r){return c(n).includes(c(t),r)}function qf(n){return _(Array.of(c(n)))}function Kf(n,t){return c(n).push(c(t))}function Yf(n,t){return Object.is(c(n),c(t))}function Gf(n){return _(Promise.resolve(c(n)))}function Nf(n,t){return _(c(n).then(c(t)))}function Qf(n){return _(c(n).buffer)}function Xf(n,t,r){return _(new Int8Array(c(n),t>>>0,r>>>0))}function Hf(n,t,r){return _(new Int16Array(c(n),t>>>0,r>>>0))}function Jf(n,t,r){return _(new Int32Array(c(n),t>>>0,r>>>0))}function zf(n,t,r){return _(new Uint8Array(c(n),t>>>0,r>>>0))}function Zf(n,t,r){return _(new Uint16Array(c(n),t>>>0,r>>>0))}function $f(n,t,r){return _(new Uint32Array(c(n),t>>>0,r>>>0))}function nc(n,t,r){return _(new Float32Array(c(n),t>>>0,r>>>0))}function tc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function rc(n,t){const r=v(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=p;m()[n/4+1]=u,m()[n/4+0]=r}function ec(n,t){throw new Error(g(n,t))}function uc(){return _(e.memory)}function fc(n,t,r){return _(x(n,t,76,S))}function cc(n,t,r){return _(x(n,t,76,S))}function oc(n,t,r){return _(x(n,t,76,S))}function ic(n,t,r){return _(x(n,t,76,S))}function _c(n,t,r){return _(x(n,t,76,S))}function dc(n,t,r){return _(x(n,t,76,S))}function ac(n,t,r){return _(x(n,t,76,A))}function bc(n,t,r){return _(x(n,t,76,S))}function gc(n,t,r){return _(x(n,t,76,S))}function wc(n,t,r){return _(x(n,t,173,T))}function sc(n,t,r){return _(x(n,t,173,T))}function lc(n,t,r){return _(x(n,t,173,I))}function mc(n,t,r){return _(x(n,t,173,T))}function pc(n,t,r){return _(x(n,t,173,T))}function yc(n,t,r){return _(x(n,t,173,T))}function hc(n,t,r){return _(x(n,t,173,T))}function vc(n,t,r){return _(x(n,t,173,T))}function xc(n,t,r){return _(x(n,t,173,T))}function Sc(n,t,r){return _(x(n,t,297,P))}function Ac(n,t,r){return _(x(n,t,569,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),R=Object.prototype,B=i.TypeError,M=h("toStringTag"),O=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),k=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},W=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new B("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===R)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in k=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[O]:void 0}}),C)i[e]&&w(i[e],O,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:k&&O,aTypedArray:function(n){if(W(n))return n;throw new B("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new B(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:W,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h0c76935794fa58e8(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h57cb04eb644ca7f3(n,t)}function T(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h0477483652d670eb(n,t,p(r))}function I(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__ha4803b0aedf7c1dd(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function hr(n){const t=c(n).document;return s(t)?0:p(t)}function vr(n){return p(c(n).location)}function xr(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Sr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Ar(n){return c(n).devicePixelRatio}function Tr(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Ir(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Pr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Dr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Er(n,t){c(n).clearTimeout(t)}function Fr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Br(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Rr(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Mr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function kr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function Lr(n){return p(c(n).getBoundingClientRect())}function Or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Cr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function Vr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function qr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Wr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Kr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Yr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Gr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Qr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Xr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function Hr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function zr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Jr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function Zr(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function $r(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function te(n,t){c(n).activeTexture(t>>>0)}function re(n,t,r){c(n).attachShader(c(t),c(r))}function ee(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function ue(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindTexture(t>>>0,c(r))}function oe(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function ie(n,t){c(n).blendEquation(t>>>0)}function _e(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function de(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function ae(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function be(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function ge(n,t){c(n).compileShader(c(t))}function we(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function se(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function le(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function me(n){const t=c(n).createProgram();return s(t)?0:p(t)}function pe(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function ye(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function he(n){const t=c(n).createTexture();return s(t)?0:p(t)}function ve(n,t){c(n).cullFace(t>>>0)}function xe(n,t){c(n).deleteBuffer(c(t))}function Se(n,t){c(n).deleteFramebuffer(c(t))}function Ae(n,t){c(n).deleteProgram(c(t))}function Te(n,t){c(n).deleteRenderbuffer(c(t))}function Ie(n,t){c(n).deleteShader(c(t))}function Pe(n,t){c(n).deleteTexture(c(t))}function De(n,t){c(n).depthFunc(t>>>0)}function Ee(n,t){c(n).depthMask(0!==t)}function Fe(n,t,r){c(n).depthRange(t,r)}function Be(n,t){c(n).disable(t>>>0)}function Re(n,t){c(n).disableVertexAttribArray(t>>>0)}function Me(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function ke(n,t){c(n).enable(t>>>0)}function Le(n,t){c(n).enableVertexAttribArray(t>>>0)}function Oe(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ce(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ve(n,t){c(n).frontFace(t>>>0)}function Ue(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function je(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function qe(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function We(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ke(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ye(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ge(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Ne(n,t){c(n).linkProgram(c(t))}function Qe(n,t,r){c(n).pixelStorei(t>>>0,r)}function Xe(n,t,r){c(n).polygonOffset(t,r)}function He(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function ze(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Je(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function Ze(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function $e(n,t){c(n).stencilMask(t>>>0)}function nu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function tu(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ru(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function eu(n,t,r){c(n).uniform1f(c(t),r)}function uu(n,t,r){c(n).uniform1i(c(t),r)}function fu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function cu(n,t){c(n).useProgram(c(t))}function ou(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function iu(n,t,r,e,u){c(n).viewport(t,r,e,u)}function _u(n,t){return p(c(n).fetch(c(t)))}function du(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function au(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function bu(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function gu(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function wu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function su(){return L((function(){return p(new Headers)}),arguments)}function lu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function mu(n){return c(n).matches}function pu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function yu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function hu(n){return c(n).now()}function vu(n){return c(n).deltaX}function xu(n){return c(n).deltaY}function Su(n){return c(n).deltaMode}function Au(n){return c(n).width}function Tu(n){return c(n).height}function Iu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function Pu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Eu(n,t){console.error(c(n),c(t))}function Fu(n){console.info(c(n))}function Bu(n){console.log(c(n))}function Ru(n){console.warn(c(n))}function Mu(n){return c(n).charCode}function ku(n){return c(n).keyCode}function Lu(n){return c(n).altKey}function Ou(n){return c(n).ctrlKey}function Cu(n){return c(n).shiftKey}function Vu(n){return c(n).metaKey}function Uu(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function ju(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function qu(n,t,r){return c(n).getModifierState(h(t,r))}function Wu(n){return c(n).matches}function Ku(n){return c(n).pointerId}function Yu(n){return c(n).pressure}function Gu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Nu(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function Qu(n){return c(n).width}function Xu(n,t){c(n).width=t>>>0}function Hu(n){return c(n).height}function zu(n,t){c(n).height=t>>>0}function Ju(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function Zu(n){const t=c(n).target;return s(t)?0:p(t)}function $u(n){return c(n).cancelBubble}function nf(n){c(n).preventDefault()}function tf(n){c(n).stopPropagation()}function rf(n){return c(n).clientX}function ef(n){return c(n).clientY}function uf(n){return c(n).offsetX}function ff(n){return c(n).offsetY}function cf(n){return c(n).ctrlKey}function of(n){return c(n).shiftKey}function _f(n){return c(n).altKey}function df(n){return c(n).metaKey}function af(n){return c(n).button}function bf(n){return c(n).buttons}function gf(n){return c(n).movementX}function wf(n){return c(n).movementY}function sf(n,t){c(n).bindVertexArrayOES(c(t))}function lf(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function mf(n,t){c(n).deleteVertexArrayOES(c(t))}function pf(n){return c(n).size}function yf(n){return c(n).type}function hf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function vf(n,t){c(n).drawBuffersWEBGL(c(t))}function xf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Sf(n){return c(n).width}function Af(n,t){c(n).width=t>>>0}function Tf(n){return c(n).height}function If(n,t){c(n).height=t>>>0}function Pf(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Df(n){return c(n).videoWidth}function Ef(n){return c(n).videoHeight}function Ff(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Bf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Rf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function Mf(n){return c(n).x}function kf(n){return c(n).y}function Lf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Of(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Cf(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Vf(n){return c(n).status}function Uf(n){return p(c(n).headers)}function jf(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function qf(){return L((function(n){return p(c(n).text())}),arguments)}function Wf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,168,S))}function Rc(n,t,r){return p(x(n,t,168,S))}function Mc(n,t,r){return p(x(n,t,168,S))}function kc(n,t,r){return p(x(n,t,168,S))}function Lc(n,t,r){return p(x(n,t,168,S))}function Oc(n,t,r){return p(x(n,t,168,A))}function Cc(n,t,r){return p(x(n,t,168,S))}function Vc(n,t,r){return p(x(n,t,168,S))}function Uc(n,t,r){return p(x(n,t,168,S))}function jc(n,t,r){return p(x(n,t,293,T))}function qc(n,t,r){return p(x(n,t,293,T))}function Wc(n,t,r){return p(x(n,t,293,I))}function Kc(n,t,r){return p(x(n,t,293,T))}function Yc(n,t,r){return p(x(n,t,293,T))}function Gc(n,t,r){return p(x(n,t,293,T))}function Nc(n,t,r){return p(x(n,t,293,T))}function Qc(n,t,r){return p(x(n,t,293,T))}function Xc(n,t,r){return p(x(n,t,293,T))}function Hc(n,t,r){return p(x(n,t,451,P))}function zc(n,t,r){return p(x(n,t,807,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h0f10778d416670b2(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h394aa38c3fa64477(n,t)}function T(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h5c8eb569e8ba9e4c(n,t,p(r))}function I(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h92ca63e977f0b181(n,t)}function P(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){return p(c(n).getBoundingClientRect())}function hr(){return L((function(n){c(n).requestFullscreen()}),arguments)}function vr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function xr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Sr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Ar(n){const t=c(n).document;return s(t)?0:p(t)}function Tr(n){return p(c(n).location)}function Ir(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Pr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Dr(n){return c(n).devicePixelRatio}function Er(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Fr(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Br(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Mr(n,t){c(n).clearTimeout(t)}function kr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Lr(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Or(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Cr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function Vr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function Ur(n){return p(c(n).style)}function jr(n,t){return p(c(n).fetch(c(t)))}function qr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Wr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Kr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Yr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Gr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Nr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Qr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function zr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function Jr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Zr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function $r(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function te(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function re(n,t){c(n).activeTexture(t>>>0)}function ee(n,t,r){c(n).attachShader(c(t),c(r))}function ue(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function oe(n,t,r){c(n).bindTexture(t>>>0,c(r))}function ie(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function _e(n,t){c(n).blendEquation(t>>>0)}function de(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ae(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function be(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ge(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function we(n,t){c(n).compileShader(c(t))}function se(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function le(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function me(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function pe(n){const t=c(n).createProgram();return s(t)?0:p(t)}function ye(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function he(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function ve(n){const t=c(n).createTexture();return s(t)?0:p(t)}function xe(n,t){c(n).cullFace(t>>>0)}function Se(n,t){c(n).deleteBuffer(c(t))}function Ae(n,t){c(n).deleteFramebuffer(c(t))}function Te(n,t){c(n).deleteProgram(c(t))}function Ie(n,t){c(n).deleteRenderbuffer(c(t))}function Pe(n,t){c(n).deleteShader(c(t))}function De(n,t){c(n).deleteTexture(c(t))}function Ee(n,t){c(n).depthFunc(t>>>0)}function Fe(n,t){c(n).depthMask(0!==t)}function Be(n,t,r){c(n).depthRange(t,r)}function Re(n,t){c(n).disable(t>>>0)}function Me(n,t){c(n).disableVertexAttribArray(t>>>0)}function ke(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Le(n,t){c(n).enable(t>>>0)}function Oe(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ce(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ve(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ue(n,t){c(n).frontFace(t>>>0)}function je(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function qe(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function We(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ke(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ye(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ge(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ne(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Qe(n,t){c(n).linkProgram(c(t))}function Xe(n,t,r){c(n).pixelStorei(t>>>0,r)}function He(n,t,r){c(n).polygonOffset(t,r)}function ze(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Je(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Ze(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function $e(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function nu(n,t){c(n).stencilMask(t>>>0)}function tu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ru(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function eu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function uu(n,t,r){c(n).uniform1f(c(t),r)}function fu(n,t,r){c(n).uniform1i(c(t),r)}function cu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function ou(n,t){c(n).useProgram(c(t))}function iu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function _u(n,t,r,e,u){c(n).viewport(t,r,e,u)}function du(n){return c(n).charCode}function au(n){return c(n).keyCode}function bu(n){return c(n).altKey}function gu(n){return c(n).ctrlKey}function wu(n){return c(n).shiftKey}function su(n){return c(n).metaKey}function lu(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function mu(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function pu(n,t,r){return c(n).getModifierState(h(t,r))}function yu(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function hu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function vu(n,t){c(n).drawBuffersWEBGL(c(t))}function xu(n){return c(n).x}function Su(n){return c(n).y}function Au(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Tu(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Iu(n){return c(n).status}function Pu(n){return p(c(n).headers)}function Du(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function Eu(){return L((function(n){return p(c(n).text())}),arguments)}function Fu(n){console.debug(c(n))}function Bu(n){console.error(c(n))}function Ru(n,t){console.error(c(n),c(t))}function Mu(n){console.info(c(n))}function ku(n){console.log(c(n))}function Lu(n){console.warn(c(n))}function Ou(){return L((function(){return p(new Headers)}),arguments)}function Cu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function Vu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function Uu(n){return c(n).pointerId}function ju(n){return c(n).pressure}function qu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Wu(n,t){c(n).bindVertexArrayOES(c(t))}function Ku(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function Yu(n,t){c(n).deleteVertexArrayOES(c(t))}function Gu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Nu(n){return c(n).width}function Qu(n,t){c(n).width=t>>>0}function Xu(n){return c(n).height}function Hu(n,t){c(n).height=t>>>0}function zu(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Ju(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function Zu(n){return c(n).width}function $u(n,t){c(n).width=t>>>0}function nf(n){return c(n).height}function tf(n,t){c(n).height=t>>>0}function rf(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function ef(n){return c(n).deltaX}function uf(n){return c(n).deltaY}function ff(n){return c(n).deltaMode}function cf(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function of(n){return c(n).width}function _f(n){return c(n).height}function df(n){return c(n).size}function af(n){return c(n).type}function bf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function gf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function wf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function sf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function lf(n){const t=c(n).target;return s(t)?0:p(t)}function mf(n){return c(n).cancelBubble}function pf(n){c(n).preventDefault()}function yf(n){c(n).stopPropagation()}function hf(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function vf(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function xf(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function Sf(n){return c(n).videoWidth}function Af(n){return c(n).videoHeight}function Tf(n){return c(n).clientX}function If(n){return c(n).clientY}function Pf(n){return c(n).offsetX}function Df(n){return c(n).offsetY}function Ef(n){return c(n).ctrlKey}function Ff(n){return c(n).shiftKey}function Bf(n){return c(n).altKey}function Rf(n){return c(n).metaKey}function Mf(n){return c(n).button}function kf(n){return c(n).buttons}function Lf(n){return c(n).movementX}function Of(n){return c(n).movementY}function Cf(n){return c(n).matches}function Vf(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function Uf(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function jf(n){return c(n).matches}function qf(n){return c(n).now()}function Wf(n,t){return p(c(n)[t>>>0])}function Kf(n){return c(n).length}function Yf(){return p(new Array)}function Gf(n){return"function"==typeof c(n)}function Nf(n,t){return p(new Function(h(n,t)))}function Qf(n){const t=c(n);return"object"==typeof t&&null!==t}function Xf(n){return p(c(n).next)}function Hf(){return L((function(n){return p(c(n).next())}),arguments)}function zf(n){return c(n).done}function Jf(n){return p(c(n).value)}function Zf(){return p(Symbol.iterator)}function $f(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function nc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function tc(){return p(new Object)}function rc(){return L((function(){return p(self.self)}),arguments)}function ec(){return L((function(){return p(window.window)}),arguments)}function uc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function fc(){return L((function(){return p(global.global)}),arguments)}function cc(n){return void 0===c(n)}function oc(n,t,r){return c(n).includes(c(t),r)}function ic(n){return p(Array.of(c(n)))}function _c(n,t){return c(n).push(c(t))}function dc(n,t){return Object.is(c(n),c(t))}function ac(n){return p(Promise.resolve(c(n)))}function bc(n,t){return p(c(n).then(c(t)))}function gc(n,t,r){return p(c(n).then(c(t),c(r)))}function wc(n){return p(c(n).buffer)}function sc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function lc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function yc(n){return p(new Uint8Array(c(n)))}function hc(n,t,r){c(n).set(c(t),r>>>0)}function vc(n){return c(n).length}function xc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Sc(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Tc(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Ic(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Pc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Dc(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Ec(n,t){throw new Error(h(n,t))}function Fc(){return p(e.memory)}function Bc(n,t,r){return p(x(n,t,191,S))}function Rc(n,t,r){return p(x(n,t,191,S))}function Mc(n,t,r){return p(x(n,t,191,S))}function kc(n,t,r){return p(x(n,t,191,S))}function Lc(n,t,r){return p(x(n,t,191,S))}function Oc(n,t,r){return p(x(n,t,191,S))}function Cc(n,t,r){return p(x(n,t,191,S))}function Vc(n,t,r){return p(x(n,t,191,A))}function Uc(n,t,r){return p(x(n,t,191,S))}function jc(n,t,r){return p(x(n,t,279,T))}function qc(n,t,r){return p(x(n,t,279,T))}function Wc(n,t,r){return p(x(n,t,279,T))}function Kc(n,t,r){return p(x(n,t,279,T))}function Yc(n,t,r){return p(x(n,t,279,T))}function Gc(n,t,r){return p(x(n,t,279,T))}function Nc(n,t,r){return p(x(n,t,279,T))}function Qc(n,t,r){return p(x(n,t,279,T))}function Xc(n,t,r){return p(x(n,t,279,I))}function Hc(n,t,r){return p(x(n,t,540,P))}function zc(n,t,r){return p(x(n,t,880,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(0),_=r(1),d=r(9),a=r(8),b=r(91),g=r(94),w=r(12),s=r(95),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(96),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(1),f=r(25),c=r(98),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(0),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=a.sidebar||r.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,i,s=1){if("string"==typeof e)return d(n,e,i);if(Array.isArray(e))return Object.assign(d(n,e[0],i),{title:e[1]});{s>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const r=e.children||[];return 0===r.length&&e.path?Object.assign(d(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:r.map(e=>t(e,n,i,s+1)),collapsable:!1!==e.collapsable}}}(e,s,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var i=n(261),s={props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},r=n(7),a=Object(r.a)(s,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=a.exports},287:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},s=(n(288),n(7)),r=Object(s.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=r.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},290:function(t,e,n){},291:function(t,e,n){},292:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},294:function(t,e,n){"use strict";n(290)},295:function(t,e,n){"use strict";n.r(e);var i=n(305),s=n(297),r=n(261);var a={name:"SidebarLinks",components:{SidebarGroup:i.default,SidebarLink:s.default},props:["items","depth","sidebarDepth"],data:()=>({openGroupIndex:0}),created(){this.refreshIndex()},watch:{$route(){this.refreshIndex()}},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n"page"===e.type&&Object(r.e)(t,e.path)))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(r.e)(this.$route,t.regularPath)}}},o=n(7),l=Object(o.a)(a,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,i){return e("li",{key:i},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:i===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):e("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},296:function(t,e,n){"use strict";n.r(e);var i=n(286),s=n(287),r={components:{NavLink:i.default,DropdownTransition:s.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},a=(n(293),n(7)),o=Object(a.a)(r,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=o.exports},297:function(t,e,n){"use strict";n.r(e);var i=n(261);function s(t,e,n,i){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}},n)}function r(t,e,n,a,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(i.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[s(t,n+"#"+e.slug,e.title,u),r(t,e.children,n,a,o,l+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:l},props:{item:u,sidebarDepth:c}}){const p=Object(i.e)(a,u.path),h="auto"===u.type?p||u.children.some(t=>Object(i.e)(a,u.basePath+"#"+t.slug)):p,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):s(t,u.path,u.title||u.path,h),f=e.frontmatter.sidebarDepth||c||l.sidebarDepth||o.sidebarDepth,b=null==f?1:f,m=l.displayAllHeaders||o.displayAllHeaders;if("auto"===u.type)return[d,r(t,u.children,u.basePath,a,b)];if((h||m)&&u.headers&&!i.d.test(u.path)){return[d,r(t,Object(i.c)(u.headers),u.path,a,b)]}return d}},o=(n(294),n(7)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},299:function(t,e,n){"use strict";n(291)},302:function(t,e,n){"use strict";n(292)},303:function(t,e,n){},304:function(t,e,n){"use strict";n.r(e);var i=n(296),s=n(261),r={components:{NavLink:n(286).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},s={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(t).map(s=>{const r=t[s],a=i[s]&&i[s].label||r.lang;let o;return r.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,s),n.some(t=>t.path===o)||(o=s)),{text:a,link:o}})};return[...this.userNav,s]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(s.j)(t),{items:(t.items||[]).map(s.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;if(t)return/^https?:/.test(t)?t:"https://github.com/"+t},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=a.sidebar||r.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,i,s=1){if("string"==typeof e)return d(n,e,i);if(Array.isArray(e))return Object.assign(d(n,e[0],i),{title:e[1]});{s>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const r=e.children||[];return 0===r.length&&e.path?Object.assign(d(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:r.map(e=>t(e,n,i,s+1)),collapsable:!1!==e.collapsable}}}(e,s,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var i=n(261),s={props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},r=n(7),a=Object(r.a)(s,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=a.exports},287:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},s=(n(288),n(7)),r=Object(s.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=r.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},290:function(t,e,n){},291:function(t,e,n){},292:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},294:function(t,e,n){"use strict";n(290)},295:function(t,e,n){"use strict";n.r(e);var i=n(305),s=n(297),r=n(261);var a={name:"SidebarLinks",components:{SidebarGroup:i.default,SidebarLink:s.default},props:["items","depth","sidebarDepth"],data:()=>({openGroupIndex:0}),created(){this.refreshIndex()},watch:{$route(){this.refreshIndex()}},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n"page"===e.type&&Object(r.e)(t,e.path)))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(r.e)(this.$route,t.regularPath)}}},o=n(7),l=Object(o.a)(a,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,i){return e("li",{key:i},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:i===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):e("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},296:function(t,e,n){"use strict";n.r(e);var i=n(286),s=n(287),r={components:{NavLink:i.default,DropdownTransition:s.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},a=(n(293),n(7)),o=Object(a.a)(r,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=o.exports},297:function(t,e,n){"use strict";n.r(e);var i=n(261);function s(t,e,n,i){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}},n)}function r(t,e,n,a,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(i.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[s(t,n+"#"+e.slug,e.title,u),r(t,e.children,n,a,o,l+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:l},props:{item:u,sidebarDepth:c}}){const p=Object(i.e)(a,u.path),h="auto"===u.type?p||u.children.some(t=>Object(i.e)(a,u.basePath+"#"+t.slug)):p,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):s(t,u.path,u.title||u.path,h),f=e.frontmatter.sidebarDepth||c||l.sidebarDepth||o.sidebarDepth,b=null==f?1:f,m=l.displayAllHeaders||o.displayAllHeaders;if("auto"===u.type)return[d,r(t,u.children,u.basePath,a,b)];if((h||m)&&u.headers&&!i.d.test(u.path)){return[d,r(t,Object(i.c)(u.headers),u.path,a,b)]}return d}},o=(n(294),n(7)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},299:function(t,e,n){"use strict";n(291)},302:function(t,e,n){"use strict";n(292)},303:function(t,e,n){},304:function(t,e,n){"use strict";n.r(e);var i=n(296),s=n(261),r={components:{NavLink:n(286).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},s={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(t).map(s=>{const r=t[s],a=i[s]&&i[s].label||r.lang;let o;return r.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,s),n.some(t=>t.path===o)||(o=s)),{text:a,link:o}})};return[...this.userNav,s]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(s.j)(t),{items:(t.items||[]).map(s.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;if(t)return/^https?:/.test(t)?t:"https://github.com/"+t},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" old_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("This will have the light rotate around the origin one degree every frame.")]),t._v(" "),s("h2",{attrs:{id:"seeing-the-light"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#seeing-the-light"}},[t._v("#")]),t._v(" Seeing the light")]),t._v(" "),s("p",[t._v("For debugging purposes, it would be nice if we could see where the light is to make sure that the scene looks correct. We could adapt our existing render pipeline to draw the light, but it will likely get in the way. Instead, we are going to extract our render pipeline creation code into a new function called "),s("code",[t._v("create_render_pipeline()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vertex_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n alpha"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" depth_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthStencilState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_write_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_compare"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompareFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StencilState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bias"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthBiasState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multiview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We also need to change "),s("code",[t._v("State::new()")]),t._v(" to use this function.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Normal Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to need to modify "),s("code",[t._v("model::DrawModel")]),t._v(" to use our "),s("code",[t._v("light_bind_group")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With that done, we can create another render pipeline for our light.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("I chose to create a separate layout for the "),s("code",[t._v("light_render_pipeline")]),t._v(", as it doesn't need all the resources that the regular "),s("code",[t._v("render_pipeline")]),t._v(" needs (mainly just the textures).")]),t._v(" "),s("p",[t._v("With that in place, we need to write the actual shaders.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// light.wgsl")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.25")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" scale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we could manually implement the draw code for the light in "),s("code",[t._v("render()")]),t._v(", but to keep with the pattern we developed, let's create a new trait called "),s("code",[t._v("DrawLight")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawLight")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Finally, we want to add Light rendering to our render passes.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With all that, we'll end up with something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(348),alt:"./light-in-scene.png"}})]),t._v(" "),s("h2",{attrs:{id:"ambient-lighting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ambient-lighting"}},[t._v("#")]),t._v(" Ambient Lighting")]),t._v(" "),s("p",[t._v("Light has a tendency to bounce around before entering our eyes. That's why you can see in areas that are in shadow. Modeling this interaction would be computationally expensive, so we will cheat. We define an ambient lighting value for the light bouncing off other parts of the scene to light our objects.")]),t._v(" "),s("p",[t._v("The ambient part is based on the light color and the object color. We've already added our "),s("code",[t._v("light_bind_group")]),t._v(", so we just need to use it in our shader. In "),s("code",[t._v("shader.wgsl")]),t._v(", add the following below the texture uniforms.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Then, we need to update our main shader code to calculate and use the ambient color value.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need (or want) much ambient light, so 0.1 is fine")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" ambient_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With that, we should get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(349),alt:"./ambient_lighting.png"}})]),t._v(" "),s("h2",{attrs:{id:"diffuse-lighting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#diffuse-lighting"}},[t._v("#")]),t._v(" Diffuse Lighting")]),t._v(" "),s("p",[t._v("Remember the normal vectors that were included in our model? We're finally going to use them. Normals represent the direction a surface is facing. By comparing the normal of a fragment with a vector pointing to a light source, we get a value of how light/dark that fragment should be. We compare the vectors using the dot product to get the cosine of the angle between them.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(350),alt:"./normal_diagram.png"}})]),t._v(" "),s("p",[t._v("If the dot product of the normal and light vector is 1.0, that means that the current fragment is directly in line with the light source and will receive the light's full intensity. A value of 0.0 or lower means that the surface is perpendicular or facing away from the light and, therefore, will be dark.")]),t._v(" "),s("p",[t._v("We're going to need to pull in the normal vector into our "),s("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're also going to want to pass that value, as well as the vertex's position, to the fragment shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("For now, let's just pass the normal directly as-is. This is wrong, but we'll fix it later.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With that, we can do the actual calculation. Add the following below the "),s("code",[t._v("ambient_color")]),t._v(" calculation but above the "),s("code",[t._v("result")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" diffuse_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we can include the "),s("code",[t._v("diffuse_color")]),t._v(" in the "),s("code",[t._v("result")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" diffuse_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that, we get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(351),alt:"./ambient_diffuse_wrong.png"}})]),t._v(" "),s("h2",{attrs:{id:"the-normal-matrix"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-normal-matrix"}},[t._v("#")]),t._v(" The normal matrix")]),t._v(" "),s("p",[t._v("Remember when I said passing the vertex normal directly to the fragment shader was wrong? Let's explore that by removing all the cubes from the scene except one that will be rotated 180 degrees on the y-axis.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In the loop, we create the instances in")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("180.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We'll also remove the "),s("code",[t._v("ambient_color")]),t._v(" from our lighting "),s("code",[t._v("result")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("That should give us something that looks like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(352),alt:"./diffuse_wrong.png"}})]),t._v(" "),s("p",[t._v("This is clearly wrong, as the light is illuminating the wrong side of the cube. This is because we aren't rotating our normals with our object, so no matter what direction the object faces, the normals will always face the same way.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(353),alt:"./normal_not_rotated.png"}})]),t._v(" "),s("p",[t._v("We need to use the model matrix to transform the normals to be in the right direction. We only want the rotation data, though. A normal represents a direction and should be a unit vector throughout the calculation. We can get our normals in the right direction using what is called a normal matrix.")]),t._v(" "),s("p",[t._v("We could compute the normal matrix in the vertex shader, but that would involve inverting the "),s("code",[t._v("model_matrix")]),t._v(", and WGSL doesn't actually have an inverse function. We would have to code our own. On top of that, computing the inverse of a matrix is actually really expensive, especially doing that computation for every vertex.")]),t._v(" "),s("p",[t._v("Instead, we're going to add a "),s("code",[t._v("normal")]),t._v(" matrix field to "),s("code",[t._v("InstanceRaw")]),t._v(". Instead of inverting the model matrix, we'll just use the instance's rotation to create a "),s("code",[t._v("Matrix3")]),t._v(".")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("We are using "),s("code",[t._v("Matrix3")]),t._v(" instead of "),s("code",[t._v("Matrix4")]),t._v(" as we only really need the rotation component of the matrix.")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to switch from using a step mode of Vertex to Instance")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// While our vertex shader only uses locations 0, and 1 now, in later tutorials, we'll")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// be using 2, 3, and 4 for Vertex. We'll start at slot 5 to not conflict with them later")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for each vec4. We don't have to do this in code, though.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to modify "),s("code",[t._v("Instance")]),t._v(" to create the normal matrix.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we need to reconstruct the normal matrix in the vertex shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("9")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("I'm currently doing things in "),s("a",{attrs:{href:"https://gamedev.stackexchange.com/questions/65783/what-are-world-space-and-eye-space-in-game-development",target:"_blank",rel:"noopener noreferrer"}},[t._v("world space"),s("OutboundLink")],1),t._v(". Doing things in view-space, also known as eye-space, is more standard as objects can have lighting issues when they are further away from the origin. If we wanted to use view-space, we would have included the rotation due to the view matrix as well. We'd also have to transform our light's position using something like "),s("code",[t._v("view_matrix * model_matrix * light_position")]),t._v(" to keep the calculation from getting messed up when the camera moves.")]),t._v(" "),s("p",[t._v("There are advantages to using view space. The main one is that when you have massive worlds doing lighting and other calculations in model spacing, it can cause issues as floating-point precision degrades when numbers get really large. View space keeps the camera at the origin meaning all calculations will be using smaller numbers. The actual lighting math ends up the same, but it does require a bit more setup.")])]),t._v(" "),s("p",[t._v("With that change, our lighting now looks correct.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(354),alt:"./diffuse_right.png"}})]),t._v(" "),s("p",[t._v("Bringing back our other objects and adding the ambient lighting gives us this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(355),alt:"./ambient_diffuse_lighting.png"}}),t._v(";")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you can guarantee that your model matrix will always apply uniform scaling to your objects, you can get away with just using the model matrix. Github user @julhe shared this code with me that does the trick:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[t._v("out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("This works by exploiting the fact that by multiplying a 4x4 matrix by a vector with 0 in the w component, only the rotation and scaling will be applied to the vector. You'll need to normalize this vector, though, as normals need to be unit length for the calculations to work.")]),t._v(" "),s("p",[t._v("The scaling factor "),s("em",[t._v("needs")]),t._v(" to be uniform in order for this to work. If it's not, the resulting normal will be skewed, as you can see in the following image.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(356),alt:"./normal-scale-issue.png"}})])]),t._v(" "),s("h2",{attrs:{id:"specular-lighting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#specular-lighting"}},[t._v("#")]),t._v(" Specular Lighting")]),t._v(" "),s("p",[t._v("Specular lighting describes the highlights that appear on objects when viewed from certain angles. If you've ever looked at a car, it's the super bright parts. Basically, some of the light can reflect off the surface like a mirror. The location of the highlight shifts depending on what angle you view it at.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(357),alt:"./specular_diagram.png"}})]),t._v(" "),s("p",[t._v("Because this is relative to the view angle, we are going to need to pass in the camera's position both into the fragment shader and into the vertex shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Don't forget to update the "),s("code",[t._v("Camera")]),t._v(" struct in "),s("code",[t._v("light.wgsl")]),t._v(" as well, as if it doesn't match the "),s("code",[t._v("CameraUniform")]),t._v(" struct in rust, the light will render wrong.")])]),t._v(" "),s("p",[t._v("We're going to need to update the "),s("code",[t._v("CameraUniform")]),t._v(" struct as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're using Vector4 because of the uniforms 16 byte spacing requirement")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Since we want to use our uniforms in the fragment shader now, we need to change its visibility.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutBinding")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Updated!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to get the direction from the fragment's position to the camera and use that with the normal to calculate the "),s("code",[t._v("reflect_dir")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.wgsl")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In the fragment shader...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" reflect_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("reflect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Then, we use the dot product to calculate the "),s("code",[t._v("specular_strength")]),t._v(" and use that to compute the "),s("code",[t._v("specular_color")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("pow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reflect_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("32.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Finally, we add that to the result.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" specular_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that, you should have something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(358),alt:"./ambient_diffuse_specular_lighting.png"}})]),t._v(" "),s("p",[t._v("If we just look at the "),s("code",[t._v("specular_color")]),t._v(" on its own, we get this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(359),alt:"./specular_lighting.png"}})]),t._v(" "),s("h2",{attrs:{id:"the-half-direction"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-half-direction"}},[t._v("#")]),t._v(" The half direction")]),t._v(" "),s("p",[t._v("Up to this point, we've actually only implemented the Phong part of Blinn-Phong. The Phong reflection model works well, but it can break down under "),s("a",{attrs:{href:"https://learnopengl.com/Advanced-Lighting/Advanced-Lighting",target:"_blank",rel:"noopener noreferrer"}},[t._v("certain circumstances"),s("OutboundLink")],1),t._v(". The Blinn part of Blinn-Phong comes from the realization that if you add the "),s("code",[t._v("view_dir")]),t._v(" and "),s("code",[t._v("light_dir")]),t._v(" together, normalize the result and use the dot product of that and the "),s("code",[t._v("normal")]),t._v(", you get roughly the same results without the issues that using "),s("code",[t._v("reflect_dir")]),t._v(" had.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" half_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("pow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" half_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("32.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("It's hard to tell the difference, but here are the results.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(360),alt:"./half_dir.png"}})]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial10_lighting"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{355:function(t,s,a){t.exports=a.p+"assets/img/light-in-scene.7c329d72.png"},356:function(t,s,a){t.exports=a.p+"assets/img/ambient_lighting.8bece8d1.png"},357:function(t,s,a){t.exports=a.p+"assets/img/normal_diagram.dfa577f7.png"},358:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_wrong.dab00d9a.png"},359:function(t,s,a){t.exports=a.p+"assets/img/diffuse_wrong.ce856a2c.png"},360:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TSkUqClYQcchQnSyIiuimVShChVIrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0DhHqZqWZgDFA1y0jFY2ImuyoGXxFAL/oRxYzETH0umUzAc3zdw8fXuyjP8j735+hWciYDfCLxLNMNi3iDeGrT0jnvE4dZUVKIz4lHDbog8SPXZZffOBccFnhm2Ein5onDxGKhjeU2ZkVDJZ4kjiiqRvlCxmWF8xZntVxlzXvyF4Zy2soy12kOIY5FLCEJETKqKKEMi/oqQSPFRIr2Yx7+QcefJJdMrhIYORZQgQrJ8YP/we9uzfzEuJsUigEdL7b9MQwEd4FGzba/j227cQL4n4ErreWv1IHpT9JrLS1yBPRsAxfXLU3eAy53gIEnXTIkR/LTFPJ54P2MvikL9N0CXWtub819nD4AaeoqcQMcHAIjBcpe93h3Z3tv/55p9vcDzyByzFOETCsAAAAGYktHRAAAAJIA/yrWOGwAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfkBBAVMhAOsiflAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAHDVJREFUeNrt3XlcVPX+x/E3CMiiqJmAAkaS4IaIS3Uzs7TNfc/2bLlaVy9tlv1u2WJmt0wzui1m2b2llmZqqWXmtdLqqrhjpmi4L6CmQSo7vz9ME84ZnMFZzgyv5+PR45HfOTNz5jufw/t8zpwz46e0sjIBAOAgf6YAAECAAAAIEAAAAQIAIEAAACBAAAAECACAAAEAECAAAAIEAAACBABAgAAACBAAAAECACBAAAAgQAAABAgAgAABABAgAAACBAAAAgQAQIAAAAgQAAABAgAgQAAAIEAAAAQIAIAAAQAQIAAAAgQAAAIEAECAAAAIEAAAAQIAIEAAACBAAAAECACAAAEAECAAABAgAAACBABAgAAACBAAgG8KYAoc16fwuG7NWqlLdq5QvV2rVXP/T/I/mllumZeeP6BJdaKYLFCTIECcpVNxgWY9EnzO5UrrJai4/sXKr3+RjkU1196oRKU3StI/68V4dMKeObJT90wbqqBfvqZ64LC3d69Rn1fa27z9qReP6L2wC6hJECDnw/9opoKOZipouxQuqbGkKyQNvv5ZvXHNCL0bVt/t69SpuEBDZqayoaLKOmz6stLbe+5YqfdadXN5TW74fLQilowtN5Zz7VNK7v08bxLs/zvtbSsctfhZPfX+Hbrl5G9uf+5bDmxW8Jb5VA2q5O4TR9Vo0ehKl0laNU0xZWXUJOhAXKVm5pcatu5TfXTFPW593tije03HZ43aqA+jmml1jUAqCjb12LnqnMuErZ+hoYfH6OkG8dQkCBB7Fcd2VOxj35/5d4vSYl33+2HdvuIDxSwYZVg+ftnbSrj8LmX613DbOgYWnjCMlYXF6MHoJCoJlYooK1Ny+kd2LXvVtmWSnQFCTcKT/JTmQL/sBLY+RK8YIKd1LsrXjLHJhjNKJGnkS8c0PaROpc933/EjumH3WsXtXa+6+zIUnL1NKitRfqOWOtS4vX6Oa693YttqpY09tcm716r3K+0ceo0Huo1V225Pmt42PC9HXXavVdyedap7YLOCsrdKkgojE3WsYXPtjE3R0sbt9EbtiEqf46XsrbrzhWaG8Smjt+vpBvG688Qx9c/6QU23LFWtfRkK+uVrZQ6eos4d73PJPKFyzx3eoaFjmhjG93cfp0Zf/KPcWElUW93y+I9aHlDTqTV5IKq52r4/wOF1T793nnon93Fp3Ti7nlHNOhBbvgsM1vFLOql2ujFAalSSfb0KT2jUymmKnztSKs4z3F5rf7pqrf63LpZ0Tct+WtDzWaVGt3bZ6xiYn6dHf3xfcfMeNH8j9qcrdJ3USKdOFri9X5pevuJuza1Zy+HnStu3Uf1m/E0Be34ov7dQZv158lWdtn1nGDuRfLPSrrpf/6wQIDUOrtWdezdqeVwHy74ed9aNI/UM97L8h+idigsUtn25Ybz0whZaERJuYy//kF77zxDFfzLMtLgrCvlprga9lKyZW/7rktfw8G8HNH7qbTbDw0zc3FRNnHq7UnOzHXqu9ns3aOCk6wwb2x8HNyw9Tz4bHsWFavrdm4bxTZfepv+E1tOBG8cYbuuwaaFlX48768aRegYBckZCaYlG5GZrwrf/Mj18tbnbU8r0M65+j8ITemjOYwrJ+MTh57zqzWv16v6fnPo6+hf8rhGfPFSlM2WCf/5MqbMfUS+T49y2pLw/QH4FOeZv9lkdm9XmyZfdvm+jAvanG8a/jrtUkrSmxY2G2yIXP6f7jh+x3Gtxd93YW8/wDMscwgrY84MOpPrZtezRTg9pfJu+5ntHP32pWmv+YxjP63Cv5l43UgsubKISP+nmg1vUZ/ZIw/nz/eaO0sf3zz1zzHZY47YalnaqUL9a/bFaf3BL+X2gsBg1enGPzXUdlrFAoRtnGcZzLxuqudc+qs8vjFOJ/NTv8A71+/oVha+aUm65sPUz9EBKf81PcezY9YYhszS/6dX6JqyeUgqO6y9HdirmrDN2nD1PsK3DT8ZrP45c/Zj+9cfnXB9FJ6l7vQTDjlKPHSv1bqvuxpo6n5pMOXW/ql4H4qm6OVc9o5oHiL023vmRxrXpp+9MPmDsVFyg5Hn/MIwXR1+usQNe0Qehdc+M/RjdWicHp+nOcc3LLVtz60LdvytdK5tccd7r2rkoX63mGT9ML4q7WqMHjNes4D8Pwa2MTNCGAeP18oHNhnY9ed4/1Cmpl5YHBNn1vN+MWKpbE675s1sLqaPpMclSTLIl58mX3XXiqBouetowvq51rzP/vzQwWFldH9Ylsx8ot0zSqumKadlNe/38LPFaPFU356pncAjLbi2WTNTjm75Qi9Jiw229D2eZHu5a0/2pcsV92qioZjp6ZaphvOUvPzplXXsfzpJ/bpZhPKNLarnwOO2jkDra1PUh45t0NFM9j+yw6zlzLxuqx5tefe71stA8+bLeO1YaxspqRmhObEq5sZVNOxuWC1s/Q8MOZ1nntXigbuypZxAg9rdM+9PVdmp/TV2apoTSknK3XXR0n3n727CFzcc7ZHK+fMM1s1TbCesae2y/6fjPkc1s3iczyvy2xjYey/DYyb3PucdqtXnyVRFlZWqdPsMwvvuGUYaz696JTFDhJTcYlr0q81vLvB5P1I099QwP/j22yopUvA6kSVmpOhT8rmtytun6RS8qZNOn5Yv580f1bON2ujXhzz23WvnmX28ydEwTDXUwpDoU5WtpYPB5vSZb63PIxtljkpQTHO7QYxn+ONWLrfJ6eWqefNXwIztUa+2HhvHVzboadxz8a2hLx3vUevtX5cbjv0lT50tv03cWmGNP1I099QwCxCDLz19ZweGa2bidnh7wih6oECCS1C59hpTQ2SXP37jopOSBjdbvPE9NzAsMdev6emqevMFV25aZjg94uY3sPSWiRs5G3bFvo77744wtX2Fv3bi7nuEYrziE9Wr9OBXHdjSMh698R52L8s/8+/fgOk57zhpOOEXQ1vo0OJlr8z4N8vMceqyKSuxo9602T76oc3GBmn7zulMeq32GNa4J8UTdlHD4ig7kfIWUlUkVPu84LbKk8MyezO660abLeOqHdPbUbWQ63ix7q9SwueltCQe3mLfyNh6rKqw2T77o1n0ZqnFwrVMeK/LrMRp6TareqeXMnzDwo25QPTqQ4Ud2KmDfCtPbtp3V4n7WoIlKw43fNzRo/RxF2LHHMzzvkL5eNUMv5mxzynovvNB8fZK+fV39TTqNm/Jz1eq/kwzjpfUStKD+xU6bT6vNky+6dNMXTn287jtXOPXxioOMh49CznGiBnUDr+lAYsrKdEVBnrpmZ+q6ReNMl/m108NaV+PPl7A8oKYy+v9Tyf++qdxyTT4drsV5OVrWpr/S6zfWpqBTZ8DEF51Um7xsJR7eoeabv1L97yZIkjb832anvIalgcHa1PcFw4VeQVlLNW7uKHXo+rDm1Y9TiaQBR3aq35KJpl/ZsKHvOLuvAbGH1ebJ19x9/FdFffWMYXzF0IXqZ3JhYEVrFo1Toy/KXz+UtOIDxbTs7rQzko7XamAYq716qiZ3fkDTopNMv8iRuoFlA8SRK9FPS29r/CjyjVY9NCnldoWum1b+MMDi5zRo8XMa5ObXNTmpp15JGmT46oc6/3tLQ/73loaca0Nvc6smt7zR6etltXnyJWbXfkjSSju/Yv3n+CtV8YBl6MZZeuDQC3oy4hKnrOPeiEvU1GzdJ3RQ7wpjd004ocWBIdQNDPy9dcX39nxJY5r8xTA+PyhUEwdO1MlWAyyxnnNq1tLrN72mgsQeDt83v1kvpQ2cqM+Cwpy+XlabJ19h69qPgsQemlY3xq7H+N7GdRVXbvvWaeu5KCZFZWEx1A2qV4CU1kvQmnvm6q5rH1GWn/nqv1G7gf4+5ANlDp6ispoRdj92zrWj9cnjG/ROVKJT1/nVOg018t6PtKvvJLvvs6vvJD16z3SlhUe6bC6tNk++YMThLMPeuSRltRtk9+Gnt2tdqLz2xl/bjP/mdXU566zD8/FBaF0tvu9jKaA2dYMqs/RZWKX1ElTUIF7HI5vpSMMW+qVRK30e3cqu38hYGBSqhR3v0x1tB6rbnnW6eN8m1d+zXsGHsxRwaLuKGrbU8ahEHYpurR1RzbS0YUvTr2NwltnBtTW7y4Ma3uEWddm95tQPSu3LUM3sU18NURCZoN8atdKu2LZactG5f1DKWaw2T97O1rUfGY0d+wGo7UndlbJ6armxGjkbddu+DVoad5lT1nVIfEc9MXqzrs/8Ro1++VFhe9bbPFmFuoEZt/8iIQDAN/gzBQAAAgQAQIAAAAgQAAABAgAAAQIAIEAAAAQIAIAAAQAQIAAAECAAAAIEAECAAAC8SQBTUH29lL1Vd77QzDA+ZfR2Pd0gngkCdQ5rBUin4gLNeiT4nMuVhjdRcURTnWzQRIejk7SzYUt9GZOs6SF1eNdgedQ5CBAP8s/NUlBuloK2S3UkxUvqEhaj226apJHJfbTZ3zOrvuHz0YpYMrbcWM61Tym59/MemysrrhOoc+q8GtSvN62s3/G9Snl/oN779k3V5r2Dj6LOQQfiQnHzHtTYxGv0YHQS7+B5GBWZqFFp/CAldU6dw8sDpDi2o2If+16SFFFWpg5FJ9Uze6u6zxmloF++Nix/2dalEhsWvAx1Dp/qlt39m+i2Plw8e8M627/2btCAl9sYxgsSeyhu+AK7nnN4Xo667F6ruD3rVPfAZgVlb5UkFUYm6ljD5toZm6KljdvpjdoRpvdfuG6O2r4/wOHXmn7vPPVO7nPm3zfl56r9sf2KP7JD0dmZCj+cpbCDWxVwbI9UUqzCyESdbBCvnOjWyoxupenRrfVdQE2XrdP5nJ1yvnN62rnWoXNxge7buUpJPy9R3V3pCsjN1vGL2mtn4jX6pPl1ejesviU3LOqcOq8OdW75Q1hzIhNlVj41f1mmiLIy5fj52bzvwPw8Pfrj+4qb96D5i9+frtB1UiNJV0i6vV+aXr7ibs2tWcvpr6NP4XG99njlZ9YEH81U8BapnqRESd1iO2rRoFf117gOlnk/3DmnT/26S3d9Plq11n5Ybjz84Fq1XvmOWtVLUNLQ2T5xiIc6p869sc4t/yF6eqD5qZCloQ0q3age/u2Axk+9zWYBmImbm6qJU29Xam62NdJ9zw/qOfFSTdu2zBLr4845bX1wi+5/u79hoypXvEczNfC9mzU875DXBwh1Tp17Y51bPkD+UnTSdPy35N4279O/4HeN+OQhBW+Z7/DzBf/8mVJnP6JehScsMwddpt6mO04e8+g6uHtOL5vSUzUOrj13AR/erEEZC+TtqHPq3Bvr3PKHsPoe3GI6ntn8Wpv3GZaxQKEbZxnGcy8bqrnXPqrPL4xTifzU7/AO9fv6FYWvmlJuubD1M/RASn/NTzl1UKFHSn8p5dRHRVU9F71UfjrW8e/akdBZm6NaaHfYBcoOCtHOwBAd8q+hxKICXZZ3UNdt+lJNPh1e7r5+x/dq4Lbl+rB1rzNjzlgnRzh7Tu1RkNBNC/q+qJlRp44dP7T1G10xuZthufhlbynmL0O0t5I9deqcOqfOq0mA1JZ0VeGJM2enmE34ewnXmN63c1G+Ws170jBeFHe1Rg8Yr1nB4WfGVkYmaMOA8Xr5wGYF7Pmh3PLJ8/6hTkm9tDwgyCmvaX5QqOYPTrN5e1ZQiL6sf7EmdP6bluUdUtTiZ8vdfvGOFdJZG5Y7eWROA2pryq1v64ULGp8ZWt7yRn0/8E3Fz/5b+UX3p+vGE79a9oNG6pw699U6t8whrIA9P+hAqp8OpPopM9VP744MU9/xbQ2nNhYkdNPbt03W/KBQ08fpfThL/rlZhvGMLqnlCuC0j0LqaFPXh0yPO/Y8ssPt85AnaV9MsmH8Ag+2r56Y0109ny+3UZ22s1Er0+UbFFjnUAx1Tp1Xlzr3mgsJi6Mv109dH9LkpB6VnukQe2y/6fjPkc1s3iczqpnamIw3PrZfikx06uu488QxXbc/Q032Zahe9laF5mxT4K+75H94c6X3q5GzUa1Li7XRA19t4Yk53XKR+Rk5eTbe++DSIvkC6pw696Y6954r0ctKFFhSpEK/ypumWvm/mY4fCgm3eZ+c4HCHHqsqWpQWa+LaT9X605HyO763So8RUVIkeWDD8sScZoddYDpeaOP1+5X5yJXG1Dl17kV17jXfhRWwP10tpt+htOnD1D8/z6mP7SfXvynv/DBVyR/cXOWNyqveLCfMaUGNQPO/r36+/RM21Dl17k11brmvMqkt6erCE7ohZ5tuWDLBcH506LppeqZ+nFb1GmN6NsLvweYXMTU4mSvVjTa/zcaGauuxHPX40b2K/2SYYfzI1Y9p/pV/1fd1o7UhMOTM61mwfp7aTe1nmSKx4px6K+qcOvcllou5PJ06k2NETLLGDE5T4SU3GFvcJWP1/I6VpvffU7eR6XizP76CwEyCjVMod5s+luOn0HU4+LPp+IQbntD/RTTVwqDQcn8k6h/d4/B+kCu5fk6rH+qcOidAXOzDkLpa1Ges6W1dFjyrLkX5hvGFFzZRaXgTw3jSt6+bHhK4KT9Xrf47yTBeWi9BC+pfbNyDDDJeMRxi48O308JPmF8cdaKGsQEcdWyfLvpirGN7tVVYJ0e4ek6rO+qcOidAXOT5xu30a6eHDeNB27/Sg1uWGMaXBgZrU98XjMtnLdW4uaP0Ys42XVZSpPYlRXoxZ5vGzBllOI9bkjb0HWd6HvfxWg0MY7VXT9XkXavVqbjAfAOqGWY6PnLZ2xqRm60WpcW64+QxTdu+XCOmDJZfQY5Dc1SVdXKEq+cU1Dl17p0sfxbWXj8/zb/qft21/FXDbe0+e1KDm16lmRXOhJic1FOvJA1SSMYn5cbr/O8tDfnfWxpyrkJtc6smt7zRfH0iLlFTk/HeEzqo4pdO3DXhhBYHhigjMlGXm9wnZsEoPblglJ483zmqwjo5ypVzCuqcOqcDcZknIhO0v/s4w3iNnI0atuEzw/icmrX0+k2vqSCxh8PPld+sl9IGTtRnQeZ7U4tiUlQWFuPQY45vEK8D3exr139ve4cyB09x6PGrsk6OcuWcgjqnzgkQl5p5+Z2m481nDtfwPGMr/Gqdhhp570fa1XeS3c+xq+8kPXrPdKWFR9pc5oPQulp838dSgP0/NponaXTXh5V93dOVLvdrp4f10qBX9ZtJq16ZqqxTVbhqTkGdU+ccwnKpl+tGq+dN76jprKHlbyjO0x2rpuuNrsbjx7ODa2t2lwc1vMMt6rJ7zakfhdmXoZrZmZKkgsgE/daolXbFttWSi879ozCnDYnvqCdGb9b1md+o0S8/KmzPegXsW1HpfRYGhWpbz2f0aHIfpWxdqojMbxWYs035sW10NLatNiRerQmN22mzf4B6V2F+qrJOVeGqOQV1Tp17H7f/IiEAwDf4MwUAAAIEAECAAAAIEAAAAQIAAAECACBAAAAECACAAAEAECAAABAgAAACBABAgAAACBAAAAECAAABAgAgQAAAnhXAFLjHgR/8zvx/w478CCQAAgQOBEfFMYIEgDfjEJabw8OR2wGAAAEAECBwTvdBFwKAAAEAECAAABAgAAACBABgPVwHAgBOVJ0uGiZAAMDJwVFxzFeDhENYAOCC8HDkdgIEAAiPaoUAAQCChgABAEKBAAEAECAAQPfhi2diESAAAAIEAOg+CBAA8InwoAMBAFSJL3+dCQECAHQfBAgA0H0QIABA90GAAED1Cw9f7z4IEABwgeoQHgQIALig+6guCBAAoPsgQACA7oMAAQC6DwIEAHy/+6hu4UGAAIATwqO6IkAA4DxVx+6DAAEAug8CBADoPtwrgLcfgEf29FP/3NNvmGaNP8J0HwQIAC8JjopjVgkSug/7+PtqgZ7+D4C1w8OR263UfVT38PC5DsSX9myA6hYeHl03Dl1V7w7Eyns2AHwjaOg+fDRAABAKdB8EiMuKky4EAN0HAQLAR7sPd35eSfdRzQOErgIA3QcBAoDuw7LdB+HhYwFi5eIEYOG/HRy6IkAAsIPnDnQfPhYgdB8A6D48i+/CAuCzO3gV16Mqz0P34WMBQvcBoCp/I86MD2aOqmWAcNou4HvbqNu365n2hQjdhw8FSFWLzCOhwx4OYG3nCBHC49w4C8uVxTmTaQDdBwgQCvN8ggSAV22fdB90IADYyQMB4pt7OQCsh+6DAAEAwoMAAeAVf3y98XorzpasHgHi1RcDUqQA3QcBAgA+sqPHjl31ChBaZIDt1Cnb5GC6D2cI8NbitPwpgwQHqnmIeOo76/i2XQLEJQXqzr0jihhwcJtJ9fNI90L3UXV8BgLApUcL3BpC/EwtAeLKAuVqWcC62+j5bJ90/QSIV+zlAPCBcKP7IEAIEYAuhO6DACFsANB9ECAEAwD3bJ90HwSIW4qUkAHYGaT7IEAqLb6KBWg2BsD7g4HTdj0rgGIF4M7tsrIPyR3Zbjl0RYAAqKadyNlB4o4dProPAgQARwnoPiyCrzIB4PthRfdBgAAA3QcBAgBuCQ+6DwIEAAgPAgQA3NN9gAABALoPAgQA6D4IEACg+yBAAMBXug/CgwABAA5dESAA4B50HwQIANB9ECAAQPdBgAAA3QcIEAB0HyBAAFTr7oPwIEAAgENXBAgAuAfdBwECAHQfBAgA0H0QIABA9wECBADdBwgQANW6+yA8CBAA4NAVAQIA7kH3QYAAAN0HAQIAdB8ECADQfYAAAUD3AQIEAOEBAgQACAUCBAAIGgIEAKwXDoSH9QUwBQA8HSJnn5VFcBAgAOC0bgTWxCEsAAABAgAgQAAABAgAgACB3ez9UJAPDwEQIAAAAgTu6ULoPgB4M64DcVOIcKEUAAIELulGAMDbcAgLAECAAAAIEAAAAQIAIEAAACBAAAAECACAAAEAECAAAAIEAAACBABAgAAACBAAAAECACBAAAAgQAAABAgAgAABABAgAAACBAAAAgQAQIAAAAgQAAABAgAgQAAAIEAAAAQIAIAAAQAQIAAAAgQAAAIEAECAAAAIEAAAAQIAIEAAACBAAAAECACAAAEAECAAABAgAAACBABAgAAACBAAAAECAAABAgAgQAAABAgAgAABABAgAAAQIAAAAgQAQIAAAAgQAAABAgAAAQIAIEAAAAQIAIAAAQAQIAAAECAAAAIEAECAAAAIEAAAAQIAAAECACBAAAAECACAAAEAECAAABAgAAACBABAgAAACBAAAAHCFAAACBAAAAECACBAAAAECAAABAgAgAABABAgAAACBABAgAAAQIAAAAgQAAABAgAgQAAABAgAAAQIAIAAAQAQIAAAAgQAQIAAAECAAAAIEAAAAQIAIEAAAAQIAAAECACAAAEAECAAAAIEAECAAABAgAAACBAAAAECACBAAAAECAAABAgAgAABABAgAAACBAAAAgQAQIAAAAgQAAABAgAgQAAAIEAAAAQIAIAAAQAQIAAAAgQAAAIEAECAAAAIEAAAAQIAIEAAACBAAAAECACAAAEAECAAAAIEAAACBABAgAAACBAAAAECACBAAAAgQAAABAgAgAABABAgAAACBAAAAgQAQIAAAAgQAAABAgAgQAAAIEAAAAQIAIAAAQAQIAAAECAAAAIEAECAAAAIEAAAAQIAAAECACBAAACe8f8Iph1tvtY2iAAAAABJRU5ErkJggg=="},361:function(t,s,a){t.exports=a.p+"assets/img/diffuse_right.e3a6b793.png"},362:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_lighting.98735034.png"},363:function(t,s,a){t.exports=a.p+"assets/img/normal-scale-issue.7631ac97.png"},364:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TSkUqgnYQcchQnSyIVnHUKhShQqgVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi5Oik6CIl/q8ptIjx4Lgf7+497t4BQr3MNCswDmi6baYScTGTXRWDrwigHwKmEJOZZcxJUhKe4+sePr7eRXmW97k/R6+asxjgE4lnmWHaxBvE05u2wXmfOMyKskp8Tjxm0gWJH7muuPzGudBkgWeGzXRqnjhMLBY6WOlgVjQ14hhxRNV0yhcyLquctzhr5Spr3ZO/MJTTV5a5TnMYCSxiCRJEKKiihDJsRGnVSbGQov24h3+o6ZfIpZCrBEaOBVSgQW76wf/gd7dWfnLCTQrFga4Xx/kYAYK7QKPmON/HjtM4AfzPwJXe9lfqwMwn6bW2FjkC+raBi+u2puwBlzvA4JMhm3JT8tMU8nng/Yy+KQsM3AI9a25vrX2cPgBp6ip5AxwcAqMFyl73eHd3Z2//nmn19wOsGnK+VYnm+gAAAAZiS0dEAAAAkgD/KtY4bAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QEEgI7HGWmrfkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAgAElEQVR42u3deXhU5eG38e9MlskGSQwEggQEZBUDURAtsii4Ly1aUFyKtrX+3ABFq6i4UQuKtBp3alX01VC19VLbagVZSkFbRRQ1LCqKLAFCSAhJyDLJvH9EZjLZmGSWs8z9uS4vk1nPDJPnPs85c2YcyvN4BABAOzl5CgAABAQAQEAAAAQEAEBAAAAgIAAAAgIAICAAAAICACAgAAAQEAAAAQEAEBAAAAEBABAQAAAICACAgAAACAgAgIAAAAgIAAAEBABAQAAABAQAQEAAAFEmlqcAQEdlOqT7h0hj+0s9M6Qkl+TxSOVV0u5S6dNt0h2fSTvqea4ICAD8aHJnaeG5UnbX5uelpzT8N7in9PImaUclzxcBAQBJI+OlJ34qZaY1/F5dK73zqbRko/RDtTT6KGl4d2nsAKnew/NFQADgR/ed5IuHxyMtfF+6a6vv/I93S9ot6TPfaS/lSlee6n87tXVSabn05Xbp3g+l1VW+85aNlyYc3/DzV9ulZ9ZKs05r2FR28JD03gbpsnXSVUdJd4yX+nSTatzSt7ulOSukd8r97+uEOOmBk6QT+kgZnaQYp1RWKRXskBZ8KL3V6PL/GiudOcx330+skW4ZJ/XuKpVWSN1eav/jISAAIOmkfr6ft+7xj0d7xMVIXVOl01KlIT2lM/OlDe7ml0t2SfN/KiUnNPyeniJN/YmUECdNHCp1Smw4PT5WGnaM9Ni50juv+a5/TrL0wkVStzT/201PkUYPknJ6SzPflJ4vbvm+F/xMSvnxvh0heDx2wbuwALRLTqzUpbPv9693B3a9X6yXHI/7/hv2tDT7TanoQMP53dKk24e1fN1jMqWVG6UJz0mrN/pOnzRSKimXpr4k/f4fvtP7dJOuz/T9Pu90Xzy2F0nXL5HOfE5au7nhtE6J0pyJrd/3tr3Sr19tWO7Ml4J/PAQEQFQamOT/+8Hqjt3OBrc0f4f0v0azl+N6tHzZ0grp/P9Iyw9Jq771P2/xR9KSAw2zoNIK3+mDjmr4/2iXNLSX7/Q/rJSeLpKWHpKu/EBy1/lC8auM5vddWS394p/Sn4tD93jsIuo3YRXm+iakWevZ2wccyeYm76hKcQV2vdEu6b6TpaHZDZuO4mMlR5PtQYc3EzVVVOb7uaxJsJY2mgEdjoEkJcb9eL9dGvZ3HPbHydIfW1nG3ExJTUJRWCJ9Whvax0NAbBSOpqcREqDtNe19Zb7NWP27BXa9/Iuk7C5tXyamlW0iNY32IzQ9pCSUO6qT4pufVlUb+sdDQGwWj6bnExGgdf/7Vjo3t+Hnft2luX2kOd+1fvkbM/0H26c/kJ77umHNful4aeLx4VvWNfukunrfYH5tvrRoX3C3aeTjMRP2gXQwMkA0u+9/0t7Shp8dDum2s6TXRkqTOjW8Xfb6TOnPOdLWKdIZiVJ1k2lDaZXk9kgPHyuNHhDeZV1TLRVs9/1+z5nSndkNyzkltSF+y0+Xvrsk8Ns08vEwAyEMgKV9XCPd9Lb0yDkNR6K74qTJJzf812wt1SH9aZ90b7F09I87qWefJ82WVF/fcBxG453c4XDXcunPFzW8xfboDOnBn0kPNrlMWTuOljf68TADITaApb12QBrxF+nZ5dLGHQ0DsLuu4WC6knJp0w7p1bXSVz/uo7jpHenTrQ2fk+Wuk3btlxa8J23dG/5lfadcOjtfemedtLO44cj5uvqGZf6hSHp3vXTrW+27TSMfj1k4lOeJqo397Y0C+0IAgBlIh4LALAQACAgAgIBEdhYCACAgAAACEjnsBwEAAgIAICDBYT8IABAQAAABMS/2gwCAv7B8FhbfsQEABCTotXQzxyRrvYeZBQAYHZBABmKrf2GTWb4npOlzzSwPgOVnIB0ZAK02+BkZkdYizTcpArBsQILZDMTadGhneDx/ACLFdO/CKsx1eP+LhI4MuGbeb8I+HaB1npt8/8EkM5BwD4bRvlZNFIDgw9HaaY7HeX4MnYGEe4AP9wBqt0ARHKDteLTnfIQ5IHbAvgOAyMCggFh9FtKex0BsAPuFgYgYPANhYLVmOAEQEcMDcjgiVg7JkZY9ko+NeAAwM4fyPGEfEUMxEBoRJSMPeAzmOWMmCAQ3q+CdWYGJyNt4Dw9oVlujNtsR5wBgJhF9F9bhzVvtHZijaY062Hgw+wCYTdhqBhLIQNfSwBltgyHxAMIXEXaQ2yggDH6hiwfhABDVAQHxQHRqPDNgcxMBQYRmH8QDdglH09OsGpKmj8nuQeSjTJh5AKaIR3vON+PjaS2Idt73QkCIB2CpQdlqMbRiEAPFJiziAZhuwG3t8uwjMZeIHImOIwtkPwjxQDQGJOKD4uPheyx2C2DUzEDau6OawRqAlUPIDCTC0TA6JG0tL0EDg695Zh8dXX67zUBsGZBwfJaUUSEhHCAg5goJ8bBxQPj6W4CIhDMmBMQnoH0gVlkjjsSn2B6+D0ICRFfogvk8Lbu+e6zNGciRBmSzDKJGfvy5GUNilX83IFp2REddQNozKPO9GeYYlHmnGQgJ8YikkByJHumBvDDXYbovXTJ6mTpy33xxFYgH8Qh5QMw6GJkxHAzKAPGIViH9LKxwDZ5WCIeRyxvMfRE8EA9mHx1l+iPRrTzAFeY62M8AmGSQjmSwouUzu0KyE72pUA2a4YpHW8tntYMQrXa0PRDsQB6qwTlcQYmmD3w07QzEqIE8a73HMrMeNj+BcAR/e6EOidW/FCskM5BgBqhQrNGaYSYQymUI5Vq+WZcLsEo8IjkrsXNIYkO9Nm6XeDS9jlnW9pl1INpEcgBufF+hiomdZyRHfBdW1noPa6kheB5CMfCHOh78u8Lsa/VGDrqhvm87fr1twG/jDWQANeuAFMrlCiYkZpk9sFIAGBcwO0Wkw5/GG84PWLTKNv5I7iPi3VaIthmI2Tb5hHrgt8MmLVN+nHuoAhKJATNSETHD26qBSA6+Zh1gQxkSq0fEadcXrNkHzUhtziIeiLaZS1u3F4r9EKEc9K2+X8R0AbHaphqjd6y3tVzEA2Zh5Jp2S4N0sAN3OHawExCD42HUoBlsRAJ53O25D8IBZiGBXd+q7xAjIGGIh5GCvX8r7fcBGHB9j8nsH61i+4AEu4PYLINmuJfDqm+jBoKJSEcH1kCvF4qB+3BIom1WYumd6GYcMMO9T6SlYLK/A8xE7DkrISBhmn2YecCM1D4RwoFoiYgVN+9EQ0QMDYgd4xGqZeQzr4DIDODhHOij8ittiYc5IgIwwBMyAhKF8QjFMjMLAXw6cuzGkQZl3oobZBwj/VEm0fqRHNEUTaA9UYjULKbxfRkRjrYeq1VDFtGARPvnORERILQBsdoA3PTxWn0GFMtLGIBha7CPhyYiZh+YW3uMnpusHZGIzUD4NFlmIUA4ZyFmnKUE+tisGhHTz0DsNnAefjzsIAeMHczDOWjb7ZsHLTkDsetaN88FEJ0Drt1mIaacgdh5sGTmAcAunDwFxANg7RsEhHgAlo5ItIaEnegIWzzY/4FoHUzZN8IMJGrX1gP9ZF1El/zNK1Q43aHC6Q6tXPsCT0gAsxI7z0ys/NjYhGXyCNpl9vHorq+8g2bhdIfWrHqy2WU+f3uO9/xF2z7mRQTbx8TqjyViAYmmzTDE48j6/vVG3VGyg1ERQcWEeBiLfSAmDkfj27NjTCZ/+KLmn3s3LxyEbBC2wj4TO82gTBuQwlyHpQbNUMSjraPUD59mp5D0eG+O5p84RXd0G3DEy+bWuXXb1jU6buMypX+9SjEVxao45mRtGzRBrw85S4tSMryXzd+8QuOfPF2StPnS5/X88Em69uNXlL3uDZX2GaWcSfP12qZlGvPUGd7LvDD8Z7ph7fPKWveGKnrlavmp1+j67FxNqSrT9I/z1evjJapJ66Hvh56r+bkXaVlcovf+8nZu0OSHhvktrzt7tA70G61NgyZowcDT9N+YOEZ7gwZnM0XFbvtyTD0DscqgGe542C0k5SdcKTmcSlm3WOf/Z5H+cNEC7XW0/rgn1h7So2/PUcaqhX6nd9pXoKGfPK/BmTnqe83rLYYoqXK/7llyg5I/e1WS5DxmZPPLVBTrnvzrlfT5EklS6s6PNOnDp+W6+SONXfWkUj59WZIUJ+m4z17V78oWatnEW9r+w9q+Rhnb12j0yoc14PTZ+vmFc7XFGcMIH6WzFLu+CSCiAcla7+nQYGvm2Ugo4xHM/VopKHXxyVo+5jeatG6xMlYt1D2jrtSNPYe1evm71r3ujcf+sbco7+zZ+taVrBkF/9KIP09SzN4Nmpp/nd6/4R9aHpfgd93st2/VpqkvaNHUp5SfmNri7We/c5uWTf+3Fk1brFmblmrUovMlSef+8WTtPG++frugXAMrSzRj7hDJfVC9356lq39ytV5ISpckTT86R9PzfM//gPo6nVFRrOuWPqKMlQvUdfk8zThxim7IHs5ozizAVizzLiwzvh021PEI5vYOv2XYKm8d/n3P4do/5mZJ0lnLH9WA+roWLzeirlYD3n/I+/ub467TsyldtCwuUbNyLtShoRdLkuK3LtclhQXNrn/o+Mm6YdQVrcZDkspG/UZXHjtGq2Pj9WFP/0H+tVFX6E1Xsuan99SBEZd7T+9bsb/V29vijNGTnTK1PucC72kDC79itAEBMWJt24wRMWrm0d6gmNUOh0N/H3utJCnlkxd153f/bfFyoypL5dznC8O6zlm+gdrhVHGfUd7fu5fubHb9PceOUYGz7Yn2vp45vpjExvudt6pTpvdntyvZ+3Oiu8Yvcn/ZtFyfv32Ptj12pnbd1k2F0x2amDfWe5nk8mJGG9iO5d6FZfTmLLOHo7XlNeMmrtu7DdTEs+eqx3tzNO79h1WVnh3y+6h2pRzxMrVxSd6fPfL/922889vRygdXP7v0EfX4551t3kdMfS2jDZiBNN1U0pHNJsEOZkatWYc7HtE4I3n9lKskSQkb31La2ieanf/fpDTVdxni/f3EskLvzwM89cr43nfAYWFaj4gv/7TKEr94LL5rsyY8WqusPI/+ff0yRhgQkEAHoPYMUlaLiNVmHmaLb2vmp/fU1oufaPX8T2LitOXM272//2z1Iv2mvFin11Zp4Rd/V+IXr0uSavqerjeyhkR8+d2ORn9CsZ1UGp8otxyas3+bRrZwtD0QVQHpyJqrXSMSTDgCfazR+MGJL594iTyuzFbPf/DEydo/tuFtsxkrF+j+O7volVmJGvHcTyVJdZk5yp/6tN+xGZHySmKqdp0998eaHNSMe3tp1cxY/d9jZ+r7nAsZYRC9AYnEAG2FiET6+9zDHRGzhfeZlC4qmLyw1fOXxSVq2qT5WnHjShVNuFPu7NGqTx+g8hFX6asr/p/mzvwgoIMRw+XuibP0+S+WqGL4ZXL3GKndZ92vp2Ys1TYDlwmIhDa/0jbSH0Nuxo89N3KZwjnQ8xHxAMIWELMcIGeH2Y0ZZ1kEBECwTPc23o4erR7owGvEwBnsW49DdbAh8QBgiRmIlXaQt7SsVlnr78hyEhAAYQ1IsINoKAYpO36bX7iP9SAeACIlLJuwGKSOPMiH4zlq6xN9+TcBENEZSHtnAWZ8F1S0zkYAwPCAtDWQR2oAJCIAYOGAGI2IAGg6FvC3Q0AsHZJAv0mQiCBaBnVWwggIL9gOvGiJCAgHs/lo4rTqgrfnAwoj9UKNlg+HBMz6euVvKLJirf4AInUQYKChCPZIejN//zsANGbZTVhGrpkEMsCzOQv8PZlrxRLMQAyfqbT3ez06+odm5q+iBYCoCkiwUenoQM4mLQB2ZbpNWHZ9jzebtGA3Zt2Mxd9K5DjN9GJs+oLsyNfpWmm2Y4c/VgAExNRrMkSEiIA1fWYfBIQ/OiICm72eGbSjl+H7QIz+tF8rPG7WtGBnZvoaazADYSYCEA8QECJCREA8YFaxPAXmiAgHHIJwgIBY8IXUdDmMGIw54NAkg9v0Rsch5fF8Eg+0xdCd6O19MYV6gDzS/RsxILNz3fhwNHtOCYkl4sFrP/KcvJjNtbbEfhFzxSOQ88HrkoBE2ezDzIiIeeIB4gFmIB1+QRv14ici5ooHoeF1CJMEhBcVEbHizIOItO+1x/48AmKLgZSIIFQhICKRec0RDwJCkIiIreJBRIgHDA6I1Xaem+XFHOyH1tnpo/HNMPATkdDHo+lrnBUfAsIshNmI7eJBRMITDxAQWw3GZn1RExHzDPTRHhGz7CwnQATEkBdFS5uGrPAdB0TEPAN8tEaE/R1wWu0FF+6QWOkFTUTMM7BHW0SIB0w/AwERsdKAHi0RIR4gIETEthFh57Z548FX4BIQEBFEWbw4shyGB6Q9LyBebESEAdwesw7+ngkILBQRDjiEHeIR6PWIUxQFJJB/bF4QzEYs+7zb6MunmHnAlDOQ1taS2cFGRCI5gPNNg+H7tw/V37JVD/aNFoZ+Jzr/+JF5jvmu9dDEIyvPExVffWu2neWHb6/xcjF2mIOh34mO6B0Uwv54Axzo27PTvbXrEQ5WCgkIiIgNB4cjDfQdDQivDeIBgzdhIbKicXMW+zmIB8KHt/FGYUSMHmxgr1kp8SAgICJEhHgw6wABQfjXHImItcNBPEBAYOhshKPWo2/WQTxAQBDSAYGIEA8QEBARIkI8iAcICIgIQvPvwjutgpPfY4V3c+/KPi/Y6rFxHAiaDRZ89AnxCNesI8fp1uzuq3V86vtKjV8tp6NI1fXHqcrdW/urB2tT+XD9es9J/MMREBARWDUc4YjHEKdbLw94QJmJc/1OT4zZosQYKd0lJcfdJxEQAgIiQkSIR2Ozuq7zxqOw8gE9u/06rTiUruPiqjQwYb9O7rxBRyUU8g9IQEBEiAjx8Nc3eaP353UlZ+vZyi6SpC01yVJNslSW3ew6+T1WaHy30yVJm0uf1xM7f66Z2a+qV8oS1XsStbX8Ej2x42L9rSal2Wznjm4fKafzUh2V8G/FOPbqYM04bT54jp4snKj33Yl+lx/gqNftmR9reNpyZbhWK9a5R6U1p2lD6Xl6Ys9ora2LlyS91/t1DTtqiiTp0/1/1XnbLvLexsbjpist/nFJ0ovfb9Hskv5tPh95GRs0udcwv9Pc9aN1oGa0NpVN0ILdp+m/dXGtPhfPF07StT1fUXbyGyqtGaWcjfMJCIgIjIlHuP+d6j2+4ebUri9rfm2q3izr4zdItiUhrkTzBkxXStyL3tMGp76reUlrVLopT8vdCZKkcbFVenzAA+rqmud3/VRXgU5yPa0hqdN099d5+kt154bLx1Trsf7z1C3xfr/LZ7g+1WndFkpaqbW7xjVfIE/o3zQS61yjjIQ1Gp3wsAakztbPN87VFk9Ms8slxe3XPf1vUHLsq5Ikp2OkIa853oWFgAYWDjgkHsHaWjHQ+3Na/OOadsxAvZnTV18Ovl3/6P033dF5R5vX7508SxtKp+jSLw7poa8LVV57lSSpc9yfNLPHv7yXm5P9hjceOyvnafam/bp0Q5U+2feWJCklbrFmHbPIe/m7s//mjUd13Xla8sOXmrKhSrcUlOrvO/+ng7WdWg6ignvOpxfneP+2stZ7NO4zt363ZY+Kq2+TJHV1zdOMjC9avG528q3aXnGGbikoVdZ6j4YWPExAYP6QGL15BaGPc6RmiPOKTtSuygf9TnNohzISHtYJR12sGf2ytaLPS61ev7x2mq7bebZWuRP0aHl3rSi63nvekNTXJEkjnLUanOqbeTzzwzV68VC6VtW5NGPH+XJ7GtbUs5Nu01TXAeXGuDU4zbfp593Cubq5+DitrnMpvzpV1+wdqWuLTmhliWJC+vxs8cToyYpMrd9/gfe0gSlftXjZQ+7JuuH7K5RfnWro649NWGj3YMMmLXvMOiIZD0na6nFq6pY7dEuXszQifZmykl6S01Hgd5lBadP0x4wTdXPxcc2uX1Q1QnsbbTb6prKH9+fk2FeVG7NYo1ylfrc5d1AXzW1leYYmFimtpkYxjg3e01aU9Qv48dQHuQlrhLNWt3VfrUGdVyot4SPFOT6XQ3v9LpMcV9zidfdUjVFBvfHDNwEBESEeEbPF49T/FZ0oFZ2oIc5Zuihlp0albdAJR82U07FVktQ/5WuphYDI4f+YHUEuflJMdVCbYJxNFiDeWdSu6z/b/xH1SLqzzcvEOGpbPL3anWKK1yEBAREhHoYoqI9VQVlvqay3/h23W/07/+bHgbmuxct3dX2iTIfHOwvpl7zLe16l+1Ktr4tVTFWa6j1DvLOQ324s0ctVaa0uQ26MW3WeHO8sZHznb/VaUW6rl6/1JHh/djkrvD9PcpUrMXZ5wI99WmKJXzwWf79ZLx3oq4L6WP3l6A80NnOiJV6LBAREJIriYeTz/Wb2P5Uet1ufl43UpsruKqjppJL6WF2Qsks9k5Z6L7e1/NgWr58S96KePnqqHi0cpxMSSnRa16d8MTpwiSTpk/o4bTlwuwalTZMkzez9hNJ3XKNlhzLUP6Zag1ylOintK2Unb9BJm2/V+rpYbTxwu4amXS5JOifrfj1SN0/vHOirbrHVOit9o9yeGF27Z4QkaU91N+999uv0lq5Nmqgid4Ju7bW42eantrjrG899Oqm0LlFuj0NzUrdpZMaTlnk9EhAQEWYdEZHorNDA1F9pYBv7fXcful95xce3eN62ioXKScvXa13P8jv9YO0v9Vih77QHd0zWowlfKSPhYfVImqPZA+ZodpPbOlj7S+/PD/xwsZ5I2KjMhN8pIeYtXd77LV3e6LIr9qz0/rxk//E6o9tZio/5l5Jil+i+gUsalq38DzpQfZ1SXU8H9Fy8Up2qWyrnqkfSHEkHNaNfL82QVO8ZoM1lszU49U0CAiJCRIjHYe8UjVep+wMdk/SF0uI2KyH2e8XHfKFaz2DtrxqtL0tP14K9p2iLp+U9E1W16bpr22Oa3vNk9UpZIo8jTt+WXabHd/5cy2p9BwYuq03UlM0P6reZFyondbkyElcrVjtV6T5JB2oGadPBU/Tuft8BfKvrXJq0+T7N6XqehqV9oAzXasU4C1Vac4a+PHCunt57it9tL/x2sa7o+bK6uZapTkn6ouRqzd55jv46+JZ2PR93b52lGT3769iUt+WK+Vr7qs7XG7uu0rFJOzQ41RqvTYfyPPzlImo3rxROD3yZs/I8lntOzRKPjmp69PX4767mD81EOA4EIZ2JcMAh8QABAQwbtIgI3+EBAgIiQkQMigcQCexER1gjws71yEbTbs/X1F2nSbsIIjMQMBNhJkI8QEAAIkI8AAICImLheLCzHAQERCQKI8LO8sDl91jhfZv3yj4vRPy2WruO0ctFQEBEoiwiVvoOj1B6NOMr72MvzHVoiNPd7DI7hg/znr+o28f8wRzBzJTd3udr+7BTCQiiIyLResAh+ztgJ7yNF4aGJJre5ks8Os6sb+eN9rcZMwOB4RExelAmHubX1v6BqxNKtPrYZ/TDsLH6PudcLT0mX+NiqvX54Dne6zzZ5bNWb/u8uEot7/uitg2boK3HT9HKvs/rovhy0y/XpwMf1O39s3yzAecav02ENyTvDfu/CzMQMBMxeTzYZNW6y10HdM+Aq5UQ85b3tKHp7+qxhHsV46g+4vUTYku1sP+tvo9hd0oDU1/XfQnf6D8bH/T7Cl07LBczEDATschMJFp3lgfqg2FxfmvMhbkOv+8nD8S1PV/zDtIl1TN176Z9+vWXFSqpOUYZrgVHvH7vlFu0pfwsXfllpf703Teq9wyQJHV1zdNVKbs6/NgisVwnbL5LD31d6L2Ou360d/9i1nqPnqzIJCAgIlaMCJuswm+I061+nR7x/v524XVadChD/6hN0twfLlW9Z8gRb6PCfZlmbr9Ay2oTdU9pPxVXT/Ke19NVbKvlIiAgIhaICPEIzITPa/3WmLPWe1TnyQn4+qNcZXI6tnh//6TCtz9guTtBZbXjj3gbew+doq2NvsCqtt73TU4JMdUdelxmXS4CAiJi8ogQjwgOXk2e6voO3EZNXbLf7x6P07bLRUBAREwcET6WJLI+rOrstznohOQ93p9Pj61S57iVtl8u/++TrSMgQKgG1EgecMjO8sgrqI/Vt+U3e3+/sPtzmpZYonPiDmlOryVyOgpsv1wH6l3en2OdH+nGpD3qFMF1JwICZiNB3jbxMM6z2yeryn2BJKlrwkOaP+goPT80Selx36m4epZvTd3hsOVy/bMqTQdrf+n9/a6B3bVluEPfHX8hAQHMHBH2dxjvlepU3ffNYn1b9pRq68eouu4cfVnyqm765k65nL4D6SrrXLZcrr0eh/K2/l47Kh5Sbf2YiD//DuV5eAXDMkK9tl84PfDby8rzEA+L+EVCqeYPHiiHGgbrOzfu1wtV6SxXiHEkOiw3EzH6qHU2WZnLJwPna2XRT7W2vKd+cCdoQtJeXZb9jHeQ3lX5e0MGabMuFzMQMBMJ0SDe3hkI8TCfXbnZcmhHi+cddP9K925ZqPzqVJaLgAChjUjAAVkdmtkTQu/mlEKd3/UDHZ24Vp3iV8mto1VS9RNtPDBeTxX9RKvd8SwXAQFCHxEFst+ReAAt4l1YsLSgB+bVQZ5PPBDFmIGA2UhrsxHiATADAbORds9GVge/LMQDzECAaJuJMOsAmIGAmQjxAAgIYPqBnHiAgABEhHgABARExBP22yceICAAEWHWARAQILyDPfEA+DTesPDcxHNg0n8ZSdLu/wT3Nt/up3rkOZVn0yocj/MchO255TgQwhGNOhqR7qfy50JIcBibsIhHVGpvCLqf6iEe/I2CgADtjMgYniuAgLBmg/ZGZIzUna28/K2iRexEBxE5tYWd64fDQTsAAgK0azZCOIAjYhNWCPDuDoC/VQICAAABYc0GAH+j4cQ+kDC8QHmnB0A4CAh4wQJAK9iEBQAgIAAAAgIAICAAAAICAAABAQAQEAAAAQEAEBAAAAEBAICAAAAICMNszhAAAAIZSURBVACAgAAACAgAgIAAAEBAAAAEBABAQAAABAQAQEAAACAgAAACAgAgIAAAAgIAICAAABAQAAABAQAQEAAAAQEAEBAAAAgIAICAAAAICACAgAAACAgAAAQEAEBAAAAEBABAQAAAICAAAAICACAgAAACAgAgIAAAEBAAAAEBABAQAAABAQAQEAAACAgAgIAAAAgIAICAAAAICAAABAQAQEAAAAQEAEBAAAAEBAAAAgIAICAAAAICACAgAAACAgAAAQEAEBAAAAEBABAQAAABAQCAgAAACAgAgIAAAAgIAICA8BQAAAgIAICAAAAICACAgAAAQEAAAAQEAEBAAAAEBABAQAAAICAAAAICACAgAAACAgAgIAAAEBAAAAEBABAQAAABAQAQEAAACAgAgIAAAAgIAICAAAAICAAABAQAQEAAAAQEAEBAAAAEBAAAAgIAICAAAAICACAgAAACAgAAAQEAEBAAAAEBABAQAAAICACAgAAACAgAgIAAAAgIAAAEBABAQAAABAQAQEAAAAQEAAACAgAgIAAAAgIAICAAAAICAAABAQAQEAAAAQEAEBAAAAEBAICAAAAICACAgAAACAgAgIAAAEBAAAAEBABAQAAABAQAQEAAACAgAAACAgAgIAAAAgIAICAAABAQAAABAQAQEAAAAQEAgIAAAAgIAICAAAAICACAgAAAQEAAAAQEAEBAAAAW8v8BQR2HRzqeBAEAAAAASUVORK5CYII="},365:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},366:function(t,s,a){t.exports=a.p+"assets/img/specular_lighting.b3869eb1.png"},367:function(t,s,a){t.exports=a.p+"assets/img/half_dir.bbcc23b8.png"},443:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"working-with-lights"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#working-with-lights"}},[t._v("#")]),t._v(" Working with Lights")]),t._v(" "),s("p",[t._v("While we can tell our scene is 3D because of our camera, it still feels very flat. That's because our model stays the same color regardless of its orientation. If we want to change that, we need to add lighting to our scene.")]),t._v(" "),s("p",[t._v("In the real world, a light source emits photons that bounce around until they enter our eyes. The color we see is the light's original color minus whatever energy it lost while bouncing around.")]),t._v(" "),s("p",[t._v("In the computer graphics world, modeling individual photons would be hilariously computationally expensive. A single 100 Watt light bulb emits about 3.27 x 10^20 photons "),s("em",[t._v("per second")]),t._v(". Just imagine that for the sun! To get around this, we're going to use math to cheat.")]),t._v(" "),s("p",[t._v("Let's discuss a few options.")]),t._v(" "),s("h2",{attrs:{id:"ray-path-tracing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ray-path-tracing"}},[t._v("#")]),t._v(" Ray/Path Tracing")]),t._v(" "),s("p",[t._v("This is an "),s("em",[t._v("advanced")]),t._v(" topic, and we won't be covering it in depth here. It's the closest model to the way light really works so I felt I had to mention it. Check out the "),s("RouterLink",{attrs:{to:"/todo/"}},[t._v("ray tracing tutorial")]),t._v(" if you want to learn more.")],1),t._v(" "),s("h2",{attrs:{id:"the-blinn-phong-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-blinn-phong-model"}},[t._v("#")]),t._v(" The Blinn-Phong Model")]),t._v(" "),s("p",[t._v("Ray/path tracing is often too computationally expensive for most real-time applications (though that is starting to change), so a more efficient, if less accurate method based on the "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/Phong_shading",target:"_blank",rel:"noopener noreferrer"}},[t._v("Phong reflection model"),s("OutboundLink")],1),t._v(" is often used. It splits up the lighting calculation into three parts: ambient lighting, diffuse lighting, and specular lighting. We're going to be learning the "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model",target:"_blank",rel:"noopener noreferrer"}},[t._v("Blinn-Phong model"),s("OutboundLink")],1),t._v(", which cheats a bit at the specular calculation to speed things up.")]),t._v(" "),s("p",[t._v("Before we can get into that, though, we need to add a light to our scene.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("LightUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Due to uniforms requiring 16 byte (4 float) spacing, we need to use a padding field here")]),t._v("\n _padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Due to uniforms requiring 16 byte (4 float) spacing, we need to use a padding field here")]),t._v("\n _padding2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Our "),s("code",[t._v("LightUniform")]),t._v(" represents a colored point in space. We're just going to use pure white light, but it's good to allow different colors of light.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The rule of thumb for alignment with WGSL structs is field alignments are always powers of 2. For example, a "),s("code",[t._v("vec3")]),t._v(" may only have three float fields, giving it a size of 12. The alignment will be bumped up to the next power of 2 being 16. This means that you have to be more careful with how you layout your struct in Rust.")]),t._v(" "),s("p",[t._v("Some developers choose to use "),s("code",[t._v("vec4")]),t._v("s instead of "),s("code",[t._v("vec3")]),t._v("s to avoid alignment\nissues. You can learn more about the alignment rules in the "),s("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#alignment-and-size",target:"_blank",rel:"noopener noreferrer"}},[t._v("WGSL spec"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("We're going to create another buffer to store our light in.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_uniform "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LightUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _padding2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll want to update our lights position, so we use COPY_DST")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light VB"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("light_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("UNIFORM")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Don't forget to add the "),s("code",[t._v("light_uniform")]),t._v(" and "),s("code",[t._v("light_buffer")]),t._v(" to "),s("code",[t._v("State")]),t._v(". After that, we need to create a bind group layout and bind group for our light.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferBindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n has_dynamic_offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_binding_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" light_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_entire_binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Add those to "),s("code",[t._v("State")]),t._v(" and also update the "),s("code",[t._v("render_pipeline_layout")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Let's also update the light's position in the "),s("code",[t._v("update()")]),t._v(" method to see what our objects look like from different angles.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Update the light")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" old_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" old_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("This will have the light rotate around the origin one degree every frame.")]),t._v(" "),s("h2",{attrs:{id:"seeing-the-light"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#seeing-the-light"}},[t._v("#")]),t._v(" Seeing the light")]),t._v(" "),s("p",[t._v("For debugging purposes, it would be nice if we could see where the light is to make sure that the scene looks correct. We could adapt our existing render pipeline to draw the light, but it will likely get in the way. Instead, we are going to extract our render pipeline creation code into a new function called "),s("code",[t._v("create_render_pipeline()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vertex_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n alpha"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" depth_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthStencilState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_write_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_compare"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompareFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StencilState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bias"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthBiasState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multiview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We also need to change "),s("code",[t._v("State::new()")]),t._v(" to use this function.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Normal Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to need to modify "),s("code",[t._v("model::DrawModel")]),t._v(" to use our "),s("code",[t._v("light_bind_group")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With that done, we can create another render pipeline for our light.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("I chose to create a separate layout for the "),s("code",[t._v("light_render_pipeline")]),t._v(", as it doesn't need all the resources that the regular "),s("code",[t._v("render_pipeline")]),t._v(" needs (mainly just the textures).")]),t._v(" "),s("p",[t._v("With that in place, we need to write the actual shaders.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// light.wgsl")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.25")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" scale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we could manually implement the draw code for the light in "),s("code",[t._v("render()")]),t._v(", but to keep with the pattern we developed, let's create a new trait called "),s("code",[t._v("DrawLight")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawLight")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Finally, we want to add Light rendering to our render passes.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With all that, we'll end up with something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(355),alt:"./light-in-scene.png"}})]),t._v(" "),s("h2",{attrs:{id:"ambient-lighting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ambient-lighting"}},[t._v("#")]),t._v(" Ambient Lighting")]),t._v(" "),s("p",[t._v("Light has a tendency to bounce around before entering our eyes. That's why you can see in areas that are in shadow. Modeling this interaction would be computationally expensive, so we will cheat. We define an ambient lighting value for the light bouncing off other parts of the scene to light our objects.")]),t._v(" "),s("p",[t._v("The ambient part is based on the light color and the object color. We've already added our "),s("code",[t._v("light_bind_group")]),t._v(", so we just need to use it in our shader. In "),s("code",[t._v("shader.wgsl")]),t._v(", add the following below the texture uniforms.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Then, we need to update our main shader code to calculate and use the ambient color value.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need (or want) much ambient light, so 0.1 is fine")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" ambient_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With that, we should get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(356),alt:"./ambient_lighting.png"}})]),t._v(" "),s("h2",{attrs:{id:"diffuse-lighting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#diffuse-lighting"}},[t._v("#")]),t._v(" Diffuse Lighting")]),t._v(" "),s("p",[t._v("Remember the normal vectors that were included in our model? We're finally going to use them. Normals represent the direction a surface is facing. By comparing the normal of a fragment with a vector pointing to a light source, we get a value of how light/dark that fragment should be. We compare the vectors using the dot product to get the cosine of the angle between them.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(357),alt:"./normal_diagram.png"}})]),t._v(" "),s("p",[t._v("If the dot product of the normal and light vector is 1.0, that means that the current fragment is directly in line with the light source and will receive the light's full intensity. A value of 0.0 or lower means that the surface is perpendicular or facing away from the light and, therefore, will be dark.")]),t._v(" "),s("p",[t._v("We're going to need to pull in the normal vector into our "),s("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're also going to want to pass that value, as well as the vertex's position, to the fragment shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("For now, let's just pass the normal directly as-is. This is wrong, but we'll fix it later.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With that, we can do the actual calculation. Add the following below the "),s("code",[t._v("ambient_color")]),t._v(" calculation but above the "),s("code",[t._v("result")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" diffuse_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we can include the "),s("code",[t._v("diffuse_color")]),t._v(" in the "),s("code",[t._v("result")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" diffuse_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that, we get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(358),alt:"./ambient_diffuse_wrong.png"}})]),t._v(" "),s("h2",{attrs:{id:"the-normal-matrix"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-normal-matrix"}},[t._v("#")]),t._v(" The normal matrix")]),t._v(" "),s("p",[t._v("Remember when I said passing the vertex normal directly to the fragment shader was wrong? Let's explore that by removing all the cubes from the scene except one that will be rotated 180 degrees on the y-axis.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In the loop, we create the instances in")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("180.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We'll also remove the "),s("code",[t._v("ambient_color")]),t._v(" from our lighting "),s("code",[t._v("result")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("That should give us something that looks like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(359),alt:"./diffuse_wrong.png"}})]),t._v(" "),s("p",[t._v("This is clearly wrong, as the light is illuminating the wrong side of the cube. This is because we aren't rotating our normals with our object, so no matter what direction the object faces, the normals will always face the same way.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(360),alt:"./normal_not_rotated.png"}})]),t._v(" "),s("p",[t._v("We need to use the model matrix to transform the normals to be in the right direction. We only want the rotation data, though. A normal represents a direction and should be a unit vector throughout the calculation. We can get our normals in the right direction using what is called a normal matrix.")]),t._v(" "),s("p",[t._v("We could compute the normal matrix in the vertex shader, but that would involve inverting the "),s("code",[t._v("model_matrix")]),t._v(", and WGSL doesn't actually have an inverse function. We would have to code our own. On top of that, computing the inverse of a matrix is actually really expensive, especially doing that computation for every vertex.")]),t._v(" "),s("p",[t._v("Instead, we're going to add a "),s("code",[t._v("normal")]),t._v(" matrix field to "),s("code",[t._v("InstanceRaw")]),t._v(". Instead of inverting the model matrix, we'll just use the instance's rotation to create a "),s("code",[t._v("Matrix3")]),t._v(".")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("We are using "),s("code",[t._v("Matrix3")]),t._v(" instead of "),s("code",[t._v("Matrix4")]),t._v(" as we only really need the rotation component of the matrix.")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to switch from using a step mode of Vertex to Instance")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// While our vertex shader only uses locations 0, and 1 now, in later tutorials, we'll")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// be using 2, 3, and 4 for Vertex. We'll start at slot 5 to not conflict with them later")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for each vec4. We don't have to do this in code, though.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to modify "),s("code",[t._v("Instance")]),t._v(" to create the normal matrix.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we need to reconstruct the normal matrix in the vertex shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("9")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("I'm currently doing things in "),s("a",{attrs:{href:"https://gamedev.stackexchange.com/questions/65783/what-are-world-space-and-eye-space-in-game-development",target:"_blank",rel:"noopener noreferrer"}},[t._v("world space"),s("OutboundLink")],1),t._v(". Doing things in view-space, also known as eye-space, is more standard as objects can have lighting issues when they are further away from the origin. If we wanted to use view-space, we would have included the rotation due to the view matrix as well. We'd also have to transform our light's position using something like "),s("code",[t._v("view_matrix * model_matrix * light_position")]),t._v(" to keep the calculation from getting messed up when the camera moves.")]),t._v(" "),s("p",[t._v("There are advantages to using view space. The main one is that when you have massive worlds doing lighting and other calculations in model spacing, it can cause issues as floating-point precision degrades when numbers get really large. View space keeps the camera at the origin meaning all calculations will be using smaller numbers. The actual lighting math ends up the same, but it does require a bit more setup.")])]),t._v(" "),s("p",[t._v("With that change, our lighting now looks correct.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(361),alt:"./diffuse_right.png"}})]),t._v(" "),s("p",[t._v("Bringing back our other objects and adding the ambient lighting gives us this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(362),alt:"./ambient_diffuse_lighting.png"}}),t._v(";")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you can guarantee that your model matrix will always apply uniform scaling to your objects, you can get away with just using the model matrix. Github user @julhe shared this code with me that does the trick:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[t._v("out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("This works by exploiting the fact that by multiplying a 4x4 matrix by a vector with 0 in the w component, only the rotation and scaling will be applied to the vector. You'll need to normalize this vector, though, as normals need to be unit length for the calculations to work.")]),t._v(" "),s("p",[t._v("The scaling factor "),s("em",[t._v("needs")]),t._v(" to be uniform in order for this to work. If it's not, the resulting normal will be skewed, as you can see in the following image.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(363),alt:"./normal-scale-issue.png"}})])]),t._v(" "),s("h2",{attrs:{id:"specular-lighting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#specular-lighting"}},[t._v("#")]),t._v(" Specular Lighting")]),t._v(" "),s("p",[t._v("Specular lighting describes the highlights that appear on objects when viewed from certain angles. If you've ever looked at a car, it's the super bright parts. Basically, some of the light can reflect off the surface like a mirror. The location of the highlight shifts depending on what angle you view it at.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(364),alt:"./specular_diagram.png"}})]),t._v(" "),s("p",[t._v("Because this is relative to the view angle, we are going to need to pass in the camera's position both into the fragment shader and into the vertex shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Don't forget to update the "),s("code",[t._v("Camera")]),t._v(" struct in "),s("code",[t._v("light.wgsl")]),t._v(" as well, as if it doesn't match the "),s("code",[t._v("CameraUniform")]),t._v(" struct in rust, the light will render wrong.")])]),t._v(" "),s("p",[t._v("We're going to need to update the "),s("code",[t._v("CameraUniform")]),t._v(" struct as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're using Vector4 because of the uniforms 16 byte spacing requirement")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Since we want to use our uniforms in the fragment shader now, we need to change its visibility.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutBinding")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Updated!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to get the direction from the fragment's position to the camera and use that with the normal to calculate the "),s("code",[t._v("reflect_dir")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.wgsl")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In the fragment shader...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" reflect_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("reflect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Then, we use the dot product to calculate the "),s("code",[t._v("specular_strength")]),t._v(" and use that to compute the "),s("code",[t._v("specular_color")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("pow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reflect_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("32.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Finally, we add that to the result.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" specular_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that, you should have something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(365),alt:"./ambient_diffuse_specular_lighting.png"}})]),t._v(" "),s("p",[t._v("If we just look at the "),s("code",[t._v("specular_color")]),t._v(" on its own, we get this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(366),alt:"./specular_lighting.png"}})]),t._v(" "),s("h2",{attrs:{id:"the-half-direction"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-half-direction"}},[t._v("#")]),t._v(" The half direction")]),t._v(" "),s("p",[t._v("Up to this point, we've actually only implemented the Phong part of Blinn-Phong. The Phong reflection model works well, but it can break down under "),s("a",{attrs:{href:"https://learnopengl.com/Advanced-Lighting/Advanced-Lighting",target:"_blank",rel:"noopener noreferrer"}},[t._v("certain circumstances"),s("OutboundLink")],1),t._v(". The Blinn part of Blinn-Phong comes from the realization that if you add the "),s("code",[t._v("view_dir")]),t._v(" and "),s("code",[t._v("light_dir")]),t._v(" together, normalize the result and use the dot product of that and the "),s("code",[t._v("normal")]),t._v(", you get roughly the same results without the issues that using "),s("code",[t._v("reflect_dir")]),t._v(" had.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" half_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("pow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" half_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("32.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("It's hard to tell the difference, but here are the results.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(367),alt:"./half_dir.png"}})]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial10_lighting"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/24.9ed2104b.js b/assets/js/24.7afa389b.js similarity index 98% rename from assets/js/24.9ed2104b.js rename to assets/js/24.7afa389b.js index 43b8fdf6..336091dd 100644 --- a/assets/js/24.9ed2104b.js +++ b/assets/js/24.7afa389b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24,25,39,45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return o})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return g}));n(93);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,o=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function a(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return o.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=a(t);return s.test(r)?t:r+".html"+n}function h(t,e){const n=t.hash,r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return a(t.path)===a(e)}function f(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const a=o.sidebar||s.sidebar;if(a){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,a);return n?n.map(e=>function t(e,n,i,r=1){if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});{r>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(e,r,t)):[]}return[]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var i=n(261),r={props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},s=n(7),o=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=o.exports},287:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(288),n(7)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},291:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},296:function(t,e,n){"use strict";n.r(e);var i=n(286),r=n(287),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(293),n(7)),a=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=a.exports},299:function(t,e,n){"use strict";n(291)},304:function(t,e,n){"use strict";n.r(e);var i=n(296),r=n(261),s={components:{NavLink:n(286).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},r={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(t).map(r=>{const s=t[r],o=i[r]&&i[r].label||s.lang;let a;return s.lang===this.$lang?a=e:(a=e.replace(this.$localeConfig.path,r),n.some(t=>t.path===a)||(a=r)),{text:o,link:a}})};return[...this.userNav,r]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(r.j)(t),{items:(t.items||[]).map(r.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;if(t)return/^https?:/.test(t)?t:"https://github.com/"+t},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const a=o.sidebar||s.sidebar;if(a){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,a);return n?n.map(e=>function t(e,n,i,r=1){if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});{r>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(e,r,t)):[]}return[]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var i=n(261),r={props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},s=n(7),o=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=o.exports},287:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(288),n(7)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},291:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},296:function(t,e,n){"use strict";n.r(e);var i=n(286),r=n(287),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(293),n(7)),a=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=a.exports},299:function(t,e,n){"use strict";n(291)},304:function(t,e,n){"use strict";n.r(e);var i=n(296),r=n(261),s={components:{NavLink:n(286).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},r={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(t).map(r=>{const s=t[r],o=i[r]&&i[r].label||s.lang;let a;return s.lang===this.$lang?a=e:(a=e.replace(this.$localeConfig.path,r),n.some(t=>t.path===a)||(a=r)),{text:o,link:a}})};return[...this.userNav,r]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(r.j)(t),{items:(t.items||[]).map(r.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;if(t)return/^https?:/.test(t)?t:"https://github.com/"+t},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const l=o.sidebar||s.sidebar;if(l){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,l);return n?n.map(e=>function t(e,n,i,r=1){if("string"==typeof e)return h(n,e,i);if(Array.isArray(e))return Object.assign(h(n,e[0],i),{title:e[1]});{r>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(e,r,t)):[]}return[]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var i=n(261),r={props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},s=n(7),o=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=o.exports},287:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(288),n(7)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},296:function(t,e,n){"use strict";n.r(e);var i=n(286),r=n(287),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(293),n(7)),l=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[25,39,45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return o})),n.d(e,"f",(function(){return a})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return g}));n(92);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,o=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function l(t){return decodeURI(t).replace(i,"").replace(r,"")}function a(t){return o.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(a(t))return t;const e=t.match(i),n=e?e[0]:"",r=l(t);return s.test(r)?t:r+".html"+n}function f(t,e){const n=t.hash,r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return l(t.path)===l(e)}function h(t,e,n){if(a(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const l=o.sidebar||s.sidebar;if(l){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,l);return n?n.map(e=>function t(e,n,i,r=1){if("string"==typeof e)return h(n,e,i);if(Array.isArray(e))return Object.assign(h(n,e[0],i),{title:e[1]});{r>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(e,r,t)):[]}return[]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},286:function(t,e,n){"use strict";n.r(e);var i=n(261),r={props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},s=n(7),o=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=o.exports},287:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(288),n(7)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},288:function(t,e,n){"use strict";n(285)},289:function(t,e,n){},293:function(t,e,n){"use strict";n(289)},296:function(t,e,n){"use strict";n.r(e);var i=n(286),r=n(287),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(293),n(7)),l=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v(t._s(n.text))]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(t){return e("li",{key:t.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:t}})],1)})),0):e("NavLink",{attrs:{item:n}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/26.173af306.js b/assets/js/26.173af306.js new file mode 100644 index 00000000..a0ba79ea --- /dev/null +++ b/assets/js/26.173af306.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{348:function(t,s,a){t.exports=a.p+"assets/img/cube-normal.025f2b53.png"},349:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_wrong.4b8065ba.png"},350:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},351:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS0UqDmaQ4pChOlkQFXHUKhShQqgVWnUwufQLmrQkKS6OgmvBwY/FqoOLs64OroIg+AHi5Oik6CIl/i8ptIjx4Lgf7+497t4BQrPCdKtnHNAN20wnE1I2tyqFXxFCECKigMKs2pwsp+A7vu4R4OtdnGf5n/tz9Gt5iwEBiXiW1UybeIN4etOucd4nFllJ0YjPicdMuiDxI9dVj984F10WeKZoZtLzxCKxVOxitYtZydSJp4hjmm5QvpD1WOO8xVmv1Fn7nvyFkbyxssx1msNIYhFLkCFBRR1lVGAjTqtBioU07Sd8/FHXL5NLJVcZjBwLqEKH4vrB/+B3t1ZhcsJLiiSA0IvjfIwA4V2g1XCc72PHaZ0AwWfgyuj4q01g5pP0RkeLHQED28DFdUdT94DLHWDoqaaYiisFaQqFAvB+Rt+UAwZvgb41r7f2Pk4fgAx1lboBDg6B0SJlr/u8u7e7t3/PtPv7AfEscnMV1+LuAAAABmJLR0QAAACSAP8q1jhsAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AUDFCAS5kaN7AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAApfSURBVHja7d1PbhNnHMfh14YjINTsuEXUayCx8BFKRGRlWXVZdYkiV0mP4EUkroFyi+yool4huCsH1409M55/7++d51khSAMYaT79vjOJZ2m12SQAaGjuJQBAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAAMjXay9BbN8uZ88/PlttvCDAYGZptXHVCR6OfUICCAiN4yEkwFDcAxEaAAERBQABQXAAAUFEAAEhbAhEBBAQ8RARQEAY/sIvIoCAiIeIAALC8Bd6EQEERDxEBBAQhr+wiwggIOIhIoCAACAgBFkCVgggIAAICAACQg1jvgGUN58CBAQAAbFCrA8gX94TPWN9PxklHICAiItQAINzhAWAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAkJXXXgKA8S0eb59/vH77UUAAqB+O/Z/LPSSOsAAyisf+r1d9jIAAEC4kAgKQ4fqIEBIBAZhAfAQEgGzWiIAACImAAAiJgAAUra+v8RgyJAICUOgiERCAAi/uQ1zg+/49fCsTgID/99/kz9LXcZmAAASNw9gEBKDwQPS1QgQEEAcEBBAIBARAHDriJjogDlgggEAQe30ICCAOBVvOn9LaAgEEgqbx6JuAgDgw8kX++vurXj7v+ZtPAgIIhBWQ3+8nIJTv179//PiPn8SBkBfrpn+evteHgDCdcOz/XICQCMR0ArGcP7U6xhojHgLCtOKx/+sjRkQcrIc+/i5DhUNAoMc1IhACUXo8BIRpro+Wa0QcxKGt8zef0v0/f/7v71X3GGvscAgIHIiIQIhD3/bjEWl1CAgciMhi+cXrIBCjvj7HVkhO8UgppVlabTb+2eL5djmr/bFnq+n8E2/Xw/r6fbvPIyTiMLLdkOQWDgERkLBxqNI2HiIiELnKKR4pOcIiWByGtL5+P5mIiINwCAiTD0RX62P/80UPiUCIh4BgPVgj4iAcAoJA1FkROV20x4qIQIhHrtxED6qzm+g7X3TX9uLY9sJ/7Pipzufr+viqzZ9FHCg9HhbIhBfESxfbU8/7u/hcVRf/qDe0BYISwyEgE9blxbrUC3+dv5M4MOV4pJTS3D8duQet6cdZFkQKR9R4CIiLdauPi3jhB6ujO46woKH7qzsvApMOh4CQjcXyS62Vsr2Xcuj4aO2lRDwG5Qhrghfrrj6uy89Vx3L+dDAe558/WB+IhwVCHWerTa2vBbn67SarP/ehACyv7o5GYOwLt3AgHAJCqj4yarIYqj5Xkwvv9mN3QyIciEe+fCV65BA83qbPv1+0Wh9Nvnq86tHVMS/8XR9hCQfCISBFx2PXbkhOObaK/nUNXQVEOBCP+hxhFaIqGr7wTTgQDgHh2cPFj9Xx7uZm0vG4r7gJLxyIh4CQUvr5wyw9HIjJsZAgHAhHl9wDCRiPKvsRmdLxVdUKEQ7EwwKBo4HYD4lwIB4WiPVR0+4KcQMdhKMPvpUJgHicxBEWgHBYIKX7elfvtNHxFYiHBQIgHBYIw6wQXwcC4mGBUBmJul+JDoiHgGBtgHBkwxFWMPvfhRcQDwsEQDgsEPLgEV4QDwsEQDgsEADxsEAYmcd4QTwEhJPDsf9zQgLCMRRHWIEsHm9fjEdVXEA8sEAAhCMb3lAqkCZvKHX918oLhnhggQAIR37cAwHEAwEpXd0nrDyJxVTCIR4CAmB1CAh92X4X3qp1YX0gHgzFTfSAvKEUwoGA0ElI9vkuvIgHAgIIB9lyDwQQDywQQDiwQADxQEBoa/sIL4gHOXGEBQgHFgge4UU8sEAA4UBA2Gryfh5f77xNC+KBgAhHg3C89N881PxvfDsThIMheUfCDOPRlncjRDwQEAFpHZHlL5fCgnggIOJhoSAc5MNjvBO0u0pAPDiVm+iAcGCB5CbnR3GtEMQDCwQQDiwQKwTEAwuEzHkSC+HAArFCQDwQEKwPxIM4HGENuEJy/cJCEA4skAARsT4QDywQwhEPhAMLxAoRD8QDCwQQDiwQMl0h1gfigYAgHogH2XCENeIK8VgvwoEFwskRsT4QDywQsiIeCAcWiBUiHogHFgggHFggZLpCrA/EAwEREfFAPMiaIywQDrBAprxCrA/EAwsE8UA4sEDof4WIB+KBBUJKKaXF42168DIgHFggnOLdzU2nH4d4gICIyH9+fTl/8kKJB4zGEVaAiDxcXFgdCAcCQvdrBPEAAQGEgzDcAwHxAAskusXjrRcB4cACAcQDC4QMeYRXOMACAcQDAQHEg+lwhAXCARZIZJ7AEg+wQADhwAIhT57AEg+wQEA4wAIBxAMBAcQDKjnCAuEACyQqj/CKB1ggIBxggZAnj/CKB1ggIBxggYB4gIAA4gG1OMIC4QALJCKP8IoHWCAgHGCBkCeP8IoHWCAgHGCBgHiABQLCAVggIB4gIMXyCK94QGSOsBAOwAIpmUd4xQMsEBAOsEBAPMACAeEALBAQDxCQYnmEVzwgOkdYCAdggZTKI7ziARYICAdYICAeYIGAcAAWCOIBCEixPMIrHlACR1gIB2CBlMgjvOIBFggIB1ggIB6ABYJwABYI4gFYIMXyCK9wgAUC4gECQp5Kf4RXPCA2R1gIB2CBIB6ABYJwABYI4iEeYIHQytQe4RUOsEBAPAABiSLyI7ziAdPgCAvhACwQxAOwQBAOwAJBPAALhJOV9AivcAAWCOIBCEhJcn2EVzyAXY6wWjh0LLV++9HqAASE+uGo++viAQiIeBRLOAABCej6+6vnH49xP0Q8gDpmabXZeBnirI8+gyIcQBOewgq4TnYXingAY3GEFTgkXawR4QAskAF4PBdAQIpZIeIBCIgVMtjqEA9AQLA6gNF4jPdEkR7pFQ7AAslIlKMs8QAsEEuk0foQDsACQTwAASnR0EdZ4gHkwhFWR/o+yhIOwAJBPAALhP5XyLF4CAcgICJidQDh+G68GbI6gAjcA+lY26eyxAOIwhFWT5oeZTmyAiwQOlkiu+EQD0BAaLQ+hAMQECvE6gCK4x7IAI7dD9ldH6IBCAiVISnt/dUBAQGAWtwDAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAExEsAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAU/EvfiluCemVcXgAAAAASUVORK5CYII="},352:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_correct.c1f96315.png"},353:function(t,s,a){t.exports=a.p+"assets/img/no_srgb.2f9f1450.png"},354:function(t,s,a){t.exports=a.p+"assets/img/debug_material.b374492b.png"},442:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"normal-mapping"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#normal-mapping"}},[t._v("#")]),t._v(" Normal Mapping")]),t._v(" "),s("p",[t._v("With just lighting, our scene is already looking pretty good. Still, our models are still overly smooth. This is understandable because we are using a very simple model. If we were using a texture that was supposed to be smooth, this wouldn't be a problem, but our brick texture is supposed to be rougher. We could solve this by adding more geometry, but that would slow our scene down, and it would be hard to know where to add new polygons. This is where normal mapping comes in.")]),t._v(" "),s("p",[t._v("Remember when we experimented with storing instance data in a texture in "),s("RouterLink",{attrs:{to:"/beginner/tutorial7-instancing/#a-different-way-textures"}},[t._v("the instancing tutorial")]),t._v("? A normal map is doing just that with normal data! We'll use the normals in the normal map in our lighting calculation in addition to the vertex normal.")],1),t._v(" "),s("p",[t._v("The brick texture I found came with a normal map. Let's take a look at it!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(348),alt:"./cube-normal.png"}})]),t._v(" "),s("p",[t._v("The r, g, and b components of the texture correspond to the x, y, and z components or the normals. All the z values should be positive. That's why the normal map has a bluish tint.")]),t._v(" "),s("p",[t._v("We'll need to modify our "),s("code",[t._v("Material")]),t._v(" struct in "),s("code",[t._v("model.rs")]),t._v(" to include a "),s("code",[t._v("normal_texture")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll have to update the "),s("code",[t._v("texture_bind_group_layout")]),t._v(" to include the normal map as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// normal map")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We'll need to load the normal map. We'll do this in the loop where we create the materials in the "),s("code",[t._v("load_model()")]),t._v(" function in "),s("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resources.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You'll notice I'm using a "),s("code",[t._v("Material::new()")]),t._v(" function we didn't have previously. Here's the code for that:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we can use the texture in the fragment shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_2d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" t_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_2d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" s_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" object_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need (or want) much ambient light, so 0.1 is fine")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" ambient_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the lighting vectors")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" object_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" half_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" diffuse_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("pow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" half_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("32.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" specular_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("If we run the code now, you'll notice things don't look quite right. Let's compare our results with the last tutorial.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(349),alt:""}}),t._v(" "),s("img",{attrs:{src:a(350),alt:""}})]),t._v(" "),s("p",[t._v("Parts of the scene are dark when they should be lit up, and vice versa.")]),t._v(" "),s("h2",{attrs:{id:"tangent-space-to-world-space"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tangent-space-to-world-space"}},[t._v("#")]),t._v(" Tangent Space to World Space")]),t._v(" "),s("p",[t._v("I mentioned briefly in the "),s("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#the-normal-matrix"}},[t._v("lighting tutorial")]),t._v(' that we were doing our lighting calculation in "world space". This meant that the entire scene was oriented with respect to the '),s("em",[t._v("world's")]),t._v(" coordinate system. When we pull the normal data from our normal texture, all the normals are in what's known as pointing roughly in the positive z direction. That means that our lighting calculation thinks all of the surfaces of our models are facing in roughly the same direction. This is referred to as "),s("code",[t._v("tangent space")]),t._v(".")],1),t._v(" "),s("p",[t._v("If we remember the "),s("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#"}},[t._v("lighting-tutorial")]),t._v(", we used the vertex normal to indicate the direction of the surface. It turns out we can use that to transform our normals from "),s("code",[t._v("tangent space")]),t._v(" into "),s("code",[t._v("world space")]),t._v(". In order to do that, we need to draw from the depths of linear algebra.")],1),t._v(" "),s("p",[t._v("We can create a matrix that represents a coordinate system using three vectors that are perpendicular (or orthonormal) to each other. Basically, we define the x, y, and z axes of our coordinate system.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" coordinate_system "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// x-axis (right)")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// y-axis (up)")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// z-axis (forward)")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to create a matrix that will represent the coordinate space relative to our vertex normals. We're then going to use that to transform our normal map data to be in world space.")]),t._v(" "),s("h2",{attrs:{id:"the-tangent-and-the-bitangent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-tangent-and-the-bitangent"}},[t._v("#")]),t._v(" The tangent and the bitangent")]),t._v(" "),s("p",[t._v("We have one of the three vectors we need, the normal. What about the others? These are the tangent and bitangent vectors. A tangent represents any vector parallel with a surface (aka. doesn't intersect with it). The tangent is always perpendicular to the normal vector. The bitangent is a tangent vector that is perpendicular to the other tangent vector. Together, the tangent, bitangent, and normal represent the x, y, and z axes, respectively.")]),t._v(" "),s("p",[t._v("Some model formats include the tangent and bitangent (sometimes called the binormal) in the vertex data, but OBJ does not. We'll have to calculate them manually. Luckily, we can derive our tangent and bitangent from our existing vertex data. Take a look at the following diagram.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(351),alt:""}})]),t._v(" "),s("p",[t._v("Basically, we can use the edges of our triangles and our normal to calculate the tangent and bitangent. But first, we need to update our "),s("code",[t._v("ModelVertex")]),t._v(" struct in "),s("code",[t._v("model.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll need to upgrade our "),s("code",[t._v("VertexBufferLayout")]),t._v(" as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tangent and bitangent")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we can calculate the new tangent and bitangent vectors. Update the mesh generation in "),s("code",[t._v("load_model()")]),t._v(" in "),s("code",[t._v("resource.rs")]),t._v(" to use the following code:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" indices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" triangles_included "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate tangents and bitangets. We're going to")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use the triangles, so we need to loop through the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// indices in chunks of 3")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate the edges of the triangle")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will give us a direction to calculate the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// tangent and bitangent")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Solving the following system of equations will")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// give us the tangent and bitangent.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos1 = delta_uv1.x * T + delta_u.y * B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos2 = delta_uv2.x * T + delta_uv2.y * B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Luckily, the place I found this equation provided")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the solution!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" r "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We flip the bitangent to enable right-handed normal")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// maps with wgpu texture coordinate system")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll use the same tangent/bitangent for each vertex in the triangle")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Used to average the tangents/bitangents")]),t._v("\n triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangents/bitangents")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" denom "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" v "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"world-space-to-tangent-space"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#world-space-to-tangent-space"}},[t._v("#")]),t._v(" World Space to Tangent Space")]),t._v(" "),s("p",[t._v("Since the normal map, by default, is in tangent space, we need to transform all the other variables used in that calculation to tangent space as well. We'll need to construct the tangent matrix in the vertex shader. First, we need our "),s("code",[t._v("VertexInput")]),t._v(" to include the tangent and bitangents we calculated earlier.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Next, we'll construct the "),s("code",[t._v("tangent_matrix")]),t._v(" and then transform the vertex's light and view position into tangent space.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent_light_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent_view_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Construct the tangent matrix")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("transpose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n world_tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n world_bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_view_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_light_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Finally, we'll update the fragment shader to use these transformed lighting values.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Sample textures..")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the lighting vectors")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" object_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_light_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_view_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Perform lighting calculations...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We get the following from this calculation.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(352),alt:""}})]),t._v(" "),s("h2",{attrs:{id:"srgb-and-normal-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#srgb-and-normal-textures"}},[t._v("#")]),t._v(" Srgb and normal textures")]),t._v(" "),s("p",[t._v("We've been using "),s("code",[t._v("Rgba8UnormSrgb")]),t._v(" for all our textures. The "),s("code",[t._v("Srgb")]),t._v(" bit specifies that we will be using "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/SRGB",target:"_blank",rel:"noopener noreferrer"}},[t._v("standard RGB (red, green, blue) color space"),s("OutboundLink")],1),t._v(". This is also known as linear color space. Linear color space has less color density. Even so, it is often used for diffuse textures, as they are typically made in "),s("code",[t._v("Srgb")]),t._v(" color space.")]),t._v(" "),s("p",[t._v("Normal textures aren't made with "),s("code",[t._v("Srgb")]),t._v(". Using "),s("code",[t._v("Rgba8UnormSrgb")]),t._v(" can change how the GPU samples the texture. This can make the resulting simulation "),s("a",{attrs:{href:"https://medium.com/@bgolus/generating-perfect-normal-maps-for-unity-f929e673fc57#b86c",target:"_blank",rel:"noopener noreferrer"}},[t._v("less accurate"),s("OutboundLink")],1),t._v(". We can avoid these issues by using "),s("code",[t._v("Rgba8Unorm")]),t._v(" when we create the texture. Let's add an "),s("code",[t._v("is_normal_map")]),t._v(" method to our "),s("code",[t._v("Texture")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" format "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" is_normal_map "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8Unorm")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll need to propagate this change to the other methods that use this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to update "),s("code",[t._v("resource.rs")]),t._v(" as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UDPATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n\n materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("That gives us the following.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(353),alt:""}})]),t._v(" "),s("h2",{attrs:{id:"unrelated-stuff"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unrelated-stuff"}},[t._v("#")]),t._v(" Unrelated stuff")]),t._v(" "),s("p",[t._v("I wanted to mess around with other materials so I added a "),s("code",[t._v("draw_model_instanced_with_material()")]),t._v(" to the "),s("code",[t._v("DrawModel")]),t._v(" trait.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("I found a cobblestone texture with a matching normal map and created a "),s("code",[t._v("debug_material")]),t._v(" for that.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" debug_material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-diffuse.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-normal.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-diffuse.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-normal.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"alt-material"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n debug_material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Then, to render with the "),s("code",[t._v("debug_material")]),t._v(", I used the "),s("code",[t._v("draw_model_instanced_with_material()")]),t._v(" that I created.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced_with_material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debug_material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("That gives us something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(354),alt:""}})]),t._v(" "),s("p",[t._v("You can find the textures I use in the GitHub Repository.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial11_normals"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/26.90f40f03.js b/assets/js/26.90f40f03.js deleted file mode 100644 index 97916edf..00000000 --- a/assets/js/26.90f40f03.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{361:function(t,s,a){t.exports=a.p+"assets/img/cube-normal.025f2b53.png"},362:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_wrong.4b8065ba.png"},363:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},364:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS0UqDmaQ4pChOlkQFXHUKhShQqgVWnUwufQLmrQkKS6OgmvBwY/FqoOLs64OroIg+AHi5Oik6CIl/i8ptIjx4Lgf7+497t4BQrPCdKtnHNAN20wnE1I2tyqFXxFCECKigMKs2pwsp+A7vu4R4OtdnGf5n/tz9Gt5iwEBiXiW1UybeIN4etOucd4nFllJ0YjPicdMuiDxI9dVj984F10WeKZoZtLzxCKxVOxitYtZydSJp4hjmm5QvpD1WOO8xVmv1Fn7nvyFkbyxssx1msNIYhFLkCFBRR1lVGAjTqtBioU07Sd8/FHXL5NLJVcZjBwLqEKH4vrB/+B3t1ZhcsJLiiSA0IvjfIwA4V2g1XCc72PHaZ0AwWfgyuj4q01g5pP0RkeLHQED28DFdUdT94DLHWDoqaaYiisFaQqFAvB+Rt+UAwZvgb41r7f2Pk4fgAx1lboBDg6B0SJlr/u8u7e7t3/PtPv7AfEscnMV1+LuAAAABmJLR0QAAACSAP8q1jhsAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AUDFCAS5kaN7AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAApfSURBVHja7d1PbhNnHMfh14YjINTsuEXUayCx8BFKRGRlWXVZdYkiV0mP4EUkroFyi+yool4huCsH1409M55/7++d51khSAMYaT79vjOJZ2m12SQAaGjuJQBAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAAMjXay9BbN8uZ88/PlttvCDAYGZptXHVCR6OfUICCAiN4yEkwFDcAxEaAAERBQABQXAAAUFEAAEhbAhEBBAQ8RARQEAY/sIvIoCAiIeIAALC8Bd6EQEERDxEBBAQhr+wiwggIOIhIoCAACAgBFkCVgggIAAICAACQg1jvgGUN58CBAQAAbFCrA8gX94TPWN9PxklHICAiItQAINzhAWAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAkJXXXgKA8S0eb59/vH77UUAAqB+O/Z/LPSSOsAAyisf+r1d9jIAAEC4kAgKQ4fqIEBIBAZhAfAQEgGzWiIAACImAAAiJgAAUra+v8RgyJAICUOgiERCAAi/uQ1zg+/49fCsTgID/99/kz9LXcZmAAASNw9gEBKDwQPS1QgQEEAcEBBAIBARAHDriJjogDlgggEAQe30ICCAOBVvOn9LaAgEEgqbx6JuAgDgw8kX++vurXj7v+ZtPAgIIhBWQ3+8nIJTv179//PiPn8SBkBfrpn+evteHgDCdcOz/XICQCMR0ArGcP7U6xhojHgLCtOKx/+sjRkQcrIc+/i5DhUNAoMc1IhACUXo8BIRpro+Wa0QcxKGt8zef0v0/f/7v71X3GGvscAgIHIiIQIhD3/bjEWl1CAgciMhi+cXrIBCjvj7HVkhO8UgppVlabTb+2eL5djmr/bFnq+n8E2/Xw/r6fbvPIyTiMLLdkOQWDgERkLBxqNI2HiIiELnKKR4pOcIiWByGtL5+P5mIiINwCAiTD0RX62P/80UPiUCIh4BgPVgj4iAcAoJA1FkROV20x4qIQIhHrtxED6qzm+g7X3TX9uLY9sJ/7Pipzufr+viqzZ9FHCg9HhbIhBfESxfbU8/7u/hcVRf/qDe0BYISwyEgE9blxbrUC3+dv5M4MOV4pJTS3D8duQet6cdZFkQKR9R4CIiLdauPi3jhB6ujO46woKH7qzsvApMOh4CQjcXyS62Vsr2Xcuj4aO2lRDwG5Qhrghfrrj6uy89Vx3L+dDAe558/WB+IhwVCHWerTa2vBbn67SarP/ehACyv7o5GYOwLt3AgHAJCqj4yarIYqj5Xkwvv9mN3QyIciEe+fCV65BA83qbPv1+0Wh9Nvnq86tHVMS/8XR9hCQfCISBFx2PXbkhOObaK/nUNXQVEOBCP+hxhFaIqGr7wTTgQDgHh2cPFj9Xx7uZm0vG4r7gJLxyIh4CQUvr5wyw9HIjJsZAgHAhHl9wDCRiPKvsRmdLxVdUKEQ7EwwKBo4HYD4lwIB4WiPVR0+4KcQMdhKMPvpUJgHicxBEWgHBYIKX7elfvtNHxFYiHBQIgHBYIw6wQXwcC4mGBUBmJul+JDoiHgGBtgHBkwxFWMPvfhRcQDwsEQDgsEPLgEV4QDwsEQDgsEADxsEAYmcd4QTwEhJPDsf9zQgLCMRRHWIEsHm9fjEdVXEA8sEAAhCMb3lAqkCZvKHX918oLhnhggQAIR37cAwHEAwEpXd0nrDyJxVTCIR4CAmB1CAh92X4X3qp1YX0gHgzFTfSAvKEUwoGA0ElI9vkuvIgHAgIIB9lyDwQQDywQQDiwQADxQEBoa/sIL4gHOXGEBQgHFgge4UU8sEAA4UBA2Gryfh5f77xNC+KBgAhHg3C89N881PxvfDsThIMheUfCDOPRlncjRDwQEAFpHZHlL5fCgnggIOJhoSAc5MNjvBO0u0pAPDiVm+iAcGCB5CbnR3GtEMQDCwQQDiwQKwTEAwuEzHkSC+HAArFCQDwQEKwPxIM4HGENuEJy/cJCEA4skAARsT4QDywQwhEPhAMLxAoRD8QDCwQQDiwQMl0h1gfigYAgHogH2XCENeIK8VgvwoEFwskRsT4QDywQsiIeCAcWiBUiHogHFgggHFggZLpCrA/EAwEREfFAPMiaIywQDrBAprxCrA/EAwsE8UA4sEDof4WIB+KBBUJKKaXF42168DIgHFggnOLdzU2nH4d4gICIyH9+fTl/8kKJB4zGEVaAiDxcXFgdCAcCQvdrBPEAAQGEgzDcAwHxAAskusXjrRcB4cACAcQDC4QMeYRXOMACAcQDAQHEg+lwhAXCARZIZJ7AEg+wQADhwAIhT57AEg+wQEA4wAIBxAMBAcQDKjnCAuEACyQqj/CKB1ggIBxggZAnj/CKB1ggIBxggYB4gIAA4gG1OMIC4QALJCKP8IoHWCAgHGCBkCeP8IoHWCAgHGCBgHiABQLCAVggIB4gIMXyCK94QGSOsBAOwAIpmUd4xQMsEBAOsEBAPMACAeEALBAQDxCQYnmEVzwgOkdYCAdggZTKI7ziARYICAdYICAeYIGAcAAWCOIBCEixPMIrHlACR1gIB2CBlMgjvOIBFggIB1ggIB6ABYJwABYI4gFYIMXyCK9wgAUC4gECQp5Kf4RXPCA2R1gIB2CBIB6ABYJwABYI4iEeYIHQytQe4RUOsEBAPAABiSLyI7ziAdPgCAvhACwQxAOwQBAOwAJBPAALhJOV9AivcAAWCOIBCEhJcn2EVzyAXY6wWjh0LLV++9HqAASE+uGo++viAQiIeBRLOAABCej6+6vnH49xP0Q8gDpmabXZeBnirI8+gyIcQBOewgq4TnYXingAY3GEFTgkXawR4QAskAF4PBdAQIpZIeIBCIgVMtjqEA9AQLA6gNF4jPdEkR7pFQ7AAslIlKMs8QAsEEuk0foQDsACQTwAASnR0EdZ4gHkwhFWR/o+yhIOwAJBPAALhP5XyLF4CAcgICJidQDh+G68GbI6gAjcA+lY26eyxAOIwhFWT5oeZTmyAiwQOlkiu+EQD0BAaLQ+hAMQECvE6gCK4x7IAI7dD9ldH6IBCAiVISnt/dUBAQGAWtwDAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAExEsAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAU/EvfiluCemVcXgAAAAASUVORK5CYII="},365:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_correct.c1f96315.png"},366:function(t,s,a){t.exports=a.p+"assets/img/no_srgb.2f9f1450.png"},367:function(t,s,a){t.exports=a.p+"assets/img/debug_material.b374492b.png"},443:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"normal-mapping"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#normal-mapping"}},[t._v("#")]),t._v(" Normal Mapping")]),t._v(" "),s("p",[t._v("With just lighting, our scene is already looking pretty good. Still, our models are still overly smooth. This is understandable because we are using a very simple model. If we were using a texture that was supposed to be smooth, this wouldn't be a problem, but our brick texture is supposed to be rougher. We could solve this by adding more geometry, but that would slow our scene down, and it would be hard to know where to add new polygons. This is where normal mapping comes in.")]),t._v(" "),s("p",[t._v("Remember when we experimented with storing instance data in a texture in "),s("RouterLink",{attrs:{to:"/beginner/tutorial7-instancing/#a-different-way-textures"}},[t._v("the instancing tutorial")]),t._v("? A normal map is doing just that with normal data! We'll use the normals in the normal map in our lighting calculation in addition to the vertex normal.")],1),t._v(" "),s("p",[t._v("The brick texture I found came with a normal map. Let's take a look at it!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(361),alt:"./cube-normal.png"}})]),t._v(" "),s("p",[t._v("The r, g, and b components of the texture correspond to the x, y, and z components or the normals. All the z values should be positive. That's why the normal map has a bluish tint.")]),t._v(" "),s("p",[t._v("We'll need to modify our "),s("code",[t._v("Material")]),t._v(" struct in "),s("code",[t._v("model.rs")]),t._v(" to include a "),s("code",[t._v("normal_texture")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll have to update the "),s("code",[t._v("texture_bind_group_layout")]),t._v(" to include the normal map as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// normal map")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We'll need to load the normal map. We'll do this in the loop where we create the materials in the "),s("code",[t._v("load_model()")]),t._v(" function in "),s("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resources.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You'll notice I'm using a "),s("code",[t._v("Material::new()")]),t._v(" function we didn't have previously. Here's the code for that:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we can use the texture in the fragment shader.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_2d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" t_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_2d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" s_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" object_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need (or want) much ambient light, so 0.1 is fine")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" ambient_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the lighting vectors")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" object_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" half_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" diffuse_strength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("pow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" half_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("32.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" specular_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" specular_strength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ambient_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" diffuse_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" specular_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" object_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("If we run the code now, you'll notice things don't look quite right. Let's compare our results with the last tutorial.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(362),alt:""}}),t._v(" "),s("img",{attrs:{src:a(363),alt:""}})]),t._v(" "),s("p",[t._v("Parts of the scene are dark when they should be lit up, and vice versa.")]),t._v(" "),s("h2",{attrs:{id:"tangent-space-to-world-space"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tangent-space-to-world-space"}},[t._v("#")]),t._v(" Tangent Space to World Space")]),t._v(" "),s("p",[t._v("I mentioned briefly in the "),s("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#the-normal-matrix"}},[t._v("lighting tutorial")]),t._v(' that we were doing our lighting calculation in "world space". This meant that the entire scene was oriented with respect to the '),s("em",[t._v("world's")]),t._v(" coordinate system. When we pull the normal data from our normal texture, all the normals are in what's known as pointing roughly in the positive z direction. That means that our lighting calculation thinks all of the surfaces of our models are facing in roughly the same direction. This is referred to as "),s("code",[t._v("tangent space")]),t._v(".")],1),t._v(" "),s("p",[t._v("If we remember the "),s("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#"}},[t._v("lighting-tutorial")]),t._v(", we used the vertex normal to indicate the direction of the surface. It turns out we can use that to transform our normals from "),s("code",[t._v("tangent space")]),t._v(" into "),s("code",[t._v("world space")]),t._v(". In order to do that, we need to draw from the depths of linear algebra.")],1),t._v(" "),s("p",[t._v("We can create a matrix that represents a coordinate system using three vectors that are perpendicular (or orthonormal) to each other. Basically, we define the x, y, and z axes of our coordinate system.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" coordinate_system "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// x-axis (right)")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// y-axis (up)")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// z-axis (forward)")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to create a matrix that will represent the coordinate space relative to our vertex normals. We're then going to use that to transform our normal map data to be in world space.")]),t._v(" "),s("h2",{attrs:{id:"the-tangent-and-the-bitangent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-tangent-and-the-bitangent"}},[t._v("#")]),t._v(" The tangent and the bitangent")]),t._v(" "),s("p",[t._v("We have one of the three vectors we need, the normal. What about the others? These are the tangent and bitangent vectors. A tangent represents any vector parallel with a surface (aka. doesn't intersect with it). The tangent is always perpendicular to the normal vector. The bitangent is a tangent vector that is perpendicular to the other tangent vector. Together, the tangent, bitangent, and normal represent the x, y, and z axes, respectively.")]),t._v(" "),s("p",[t._v("Some model formats include the tangent and bitangent (sometimes called the binormal) in the vertex data, but OBJ does not. We'll have to calculate them manually. Luckily, we can derive our tangent and bitangent from our existing vertex data. Take a look at the following diagram.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(364),alt:""}})]),t._v(" "),s("p",[t._v("Basically, we can use the edges of our triangles and our normal to calculate the tangent and bitangent. But first, we need to update our "),s("code",[t._v("ModelVertex")]),t._v(" struct in "),s("code",[t._v("model.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll need to upgrade our "),s("code",[t._v("VertexBufferLayout")]),t._v(" as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tangent and bitangent")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, we can calculate the new tangent and bitangent vectors. Update the mesh generation in "),s("code",[t._v("load_model()")]),t._v(" in "),s("code",[t._v("resource.rs")]),t._v(" to use the following code:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" indices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" triangles_included "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate tangents and bitangets. We're going to")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use the triangles, so we need to loop through the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// indices in chunks of 3")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate the edges of the triangle")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will give us a direction to calculate the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// tangent and bitangent")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Solving the following system of equations will")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// give us the tangent and bitangent.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos1 = delta_uv1.x * T + delta_u.y * B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos2 = delta_uv2.x * T + delta_uv2.y * B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Luckily, the place I found this equation provided")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the solution!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" r "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We flip the bitangent to enable right-handed normal")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// maps with wgpu texture coordinate system")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll use the same tangent/bitangent for each vertex in the triangle")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Used to average the tangents/bitangents")]),t._v("\n triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangents/bitangents")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangles_included"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" denom "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" v "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"world-space-to-tangent-space"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#world-space-to-tangent-space"}},[t._v("#")]),t._v(" World Space to Tangent Space")]),t._v(" "),s("p",[t._v("Since the normal map, by default, is in tangent space, we need to transform all the other variables used in that calculation to tangent space as well. We'll need to construct the tangent matrix in the vertex shader. First, we need our "),s("code",[t._v("VertexInput")]),t._v(" to include the tangent and bitangents we calculated earlier.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Next, we'll construct the "),s("code",[t._v("tangent_matrix")]),t._v(" and then transform the vertex's light and view position into tangent space.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent_light_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tangent_view_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Construct the tangent matrix")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("transpose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat3x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n world_tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n world_bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n world_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" world_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_view_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_light_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" light"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Finally, we'll update the fragment shader to use these transformed lighting values.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Sample textures..")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the lighting vectors")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" object_normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_light_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_view_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Perform lighting calculations...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We get the following from this calculation.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(365),alt:""}})]),t._v(" "),s("h2",{attrs:{id:"srgb-and-normal-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#srgb-and-normal-textures"}},[t._v("#")]),t._v(" Srgb and normal textures")]),t._v(" "),s("p",[t._v("We've been using "),s("code",[t._v("Rgba8UnormSrgb")]),t._v(" for all our textures. The "),s("code",[t._v("Srgb")]),t._v(" bit specifies that we will be using "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/SRGB",target:"_blank",rel:"noopener noreferrer"}},[t._v("standard RGB (red, green, blue) color space"),s("OutboundLink")],1),t._v(". This is also known as linear color space. Linear color space has less color density. Even so, it is often used for diffuse textures, as they are typically made in "),s("code",[t._v("Srgb")]),t._v(" color space.")]),t._v(" "),s("p",[t._v("Normal textures aren't made with "),s("code",[t._v("Srgb")]),t._v(". Using "),s("code",[t._v("Rgba8UnormSrgb")]),t._v(" can change how the GPU samples the texture. This can make the resulting simulation "),s("a",{attrs:{href:"https://medium.com/@bgolus/generating-perfect-normal-maps-for-unity-f929e673fc57#b86c",target:"_blank",rel:"noopener noreferrer"}},[t._v("less accurate"),s("OutboundLink")],1),t._v(". We can avoid these issues by using "),s("code",[t._v("Rgba8Unorm")]),t._v(" when we create the texture. Let's add an "),s("code",[t._v("is_normal_map")]),t._v(" method to our "),s("code",[t._v("Texture")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" format "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" is_normal_map "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8Unorm")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll need to propagate this change to the other methods that use this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to update "),s("code",[t._v("resource.rs")]),t._v(" as well.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UDPATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n\n materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("That gives us the following.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(366),alt:""}})]),t._v(" "),s("h2",{attrs:{id:"unrelated-stuff"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unrelated-stuff"}},[t._v("#")]),t._v(" Unrelated stuff")]),t._v(" "),s("p",[t._v("I wanted to mess around with other materials so I added a "),s("code",[t._v("draw_model_instanced_with_material()")]),t._v(" to the "),s("code",[t._v("DrawModel")]),t._v(" trait.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("I found a cobblestone texture with a matching normal map and created a "),s("code",[t._v("debug_material")]),t._v(" for that.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" debug_material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-diffuse.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-normal.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-diffuse.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-normal.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"alt-material"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n debug_material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Then, to render with the "),s("code",[t._v("debug_material")]),t._v(", I used the "),s("code",[t._v("draw_model_instanced_with_material()")]),t._v(" that I created.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced_with_material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debug_material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("That gives us something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(367),alt:""}})]),t._v(" "),s("p",[t._v("You can find the textures I use in the GitHub Repository.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial11_normals"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/28.0c785127.js b/assets/js/28.be489186.js similarity index 99% rename from assets/js/28.0c785127.js rename to assets/js/28.be489186.js index 8076f152..5994cb67 100644 --- a/assets/js/28.0c785127.js +++ b/assets/js/28.be489186.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{334:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},335:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},336:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},337:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},338:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.eb2186c8.png"},435:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"textures-and-bind-groups"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#textures-and-bind-groups"}},[t._v("#")]),t._v(" Textures and bind groups")]),t._v(" "),s("p",[t._v("Up to this point, we have been drawing super simple shapes. While we can make a game with just triangles, trying to draw highly detailed objects would massively limit what devices could even run our game. However, we can get around this problem with "),s("strong",[t._v("textures")]),t._v(".")]),t._v(" "),s("p",[t._v("Textures are images overlaid on a triangle mesh to make it seem more detailed. There are multiple types of textures, such as normal maps, bump maps, specular maps, and diffuse maps. We're going to talk about diffuse maps or, more simply, the color texture.")]),t._v(" "),s("h2",{attrs:{id:"loading-an-image-from-a-file"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-an-image-from-a-file"}},[t._v("#")]),t._v(" Loading an image from a file")]),t._v(" "),s("p",[t._v("If we want to map an image to our mesh, we first need an image. Let's use this happy little tree:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(334),alt:"a happy tree"}})]),t._v(" "),s("p",[t._v("We'll use the "),s("a",{attrs:{href:"https://docs.rs/image",target:"_blank",rel:"noopener noreferrer"}},[t._v("image crate"),s("OutboundLink")],1),t._v(" to load our tree. Let's add it to our dependencies:")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies.image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.24"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("default-features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"jpeg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("The jpeg decoder that "),s("code",[t._v("image")]),t._v(" includes uses "),s("a",{attrs:{href:"https://docs.rs/rayon",target:"_blank",rel:"noopener noreferrer"}},[t._v("rayon"),s("OutboundLink")],1),t._v(" to speed up the decoding with threads. WASM doesn't support threads currently, so we need to disable this so our code won't crash when we try to load a jpeg on the web.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Decoding jpegs in WASM isn't very performant. If you want to speed up image loading in general in WASM, you could opt to use the browser's built-in decoders instead of "),s("code",[t._v("image")]),t._v(" when building with "),s("code",[t._v("wasm-bindgen")]),t._v(". This will involve creating an "),s("code",[t._v("")]),t._v(" tag in Rust to get the image and then a "),s("code",[t._v("")]),t._v(" to get the pixel data, but I'll leave this as an exercise for the reader.")])]),t._v(" "),s("p",[t._v("In "),s("code",[t._v("State")]),t._v("'s "),s("code",[t._v("new()")]),t._v(" method, add the following just after configuring the "),s("code",[t._v("surface")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_image "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_rgba "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Here, we grab the bytes from our image file and load them into an image, which is then converted into a "),s("code",[t._v("Vec")]),t._v(" of RGBA bytes. We also save the image's dimensions for when we create the actual "),s("code",[t._v("Texture")]),t._v(".")]),t._v(" "),s("p",[t._v("Now, let's create the "),s("code",[t._v("Texture")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All textures are stored as 3D, we represent our 2D texture")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// by setting depth to 1.")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll talk about this a little later")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Most images are stored using sRGB, so we need to reflect that here.")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TEXTURE_BINDING tells wgpu that we want to use this texture in shaders")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// COPY_DST means that we want to copy data to this texture")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_texture"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is the same as with the SurfaceConfig. It")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// specifies what texture formats can be used to")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create TextureViews for this texture. The base")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// texture format (Rgba8UnormSrgb in this case) is")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// always supported. Note that using a different")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// texture format is not supported on the WebGL2")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// backend.")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"getting-data-into-a-texture"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-into-a-texture"}},[t._v("#")]),t._v(" Getting data into a Texture")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("Texture")]),t._v(" struct has no methods to interact with the data directly. However, we can use a method on the "),s("code",[t._v("queue")]),t._v(" we created earlier called "),s("code",[t._v("write_texture")]),t._v(" to load in the texture. Let's take a look at how we do that:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tells wgpu where to copy the pixel data")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The actual pixel data")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The layout of the texture")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("The old way of writing data to a texture was to copy the pixel data to a buffer and then copy it to the texture. Using "),s("code",[t._v("write_texture")]),t._v(" is a bit more efficient as it uses one buffer less - I'll leave it here, though, in case you need it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Temp Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_buffer_copy_encoder"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nencoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_buffer_to_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n array_layer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nqueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("bytes_per_row")]),t._v(" field needs some consideration. This value needs to be a multiple of 256. Check out "),s("RouterLink",{attrs:{to:"/showcase/gifs/#how-do-we-make-the-frames"}},[t._v("the gif tutorial")]),t._v(" for more details.")],1)]),t._v(" "),s("h2",{attrs:{id:"textureviews-and-samplers"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#textureviews-and-samplers"}},[t._v("#")]),t._v(" TextureViews and Samplers")]),t._v(" "),s("p",[t._v("Now that our texture has data in it, we need a way to use it. This is where a "),s("code",[t._v("TextureView")]),t._v(" and a "),s("code",[t._v("Sampler")]),t._v(" come in. A "),s("code",[t._v("TextureView")]),t._v(" offers us a "),s("em",[t._v("view")]),t._v(" into our texture. A "),s("code",[t._v("Sampler")]),t._v(" controls how the "),s("code",[t._v("Texture")]),t._v(" is "),s("em",[t._v("sampled")]),t._v(". Sampling works similar to the eyedropper tool in GIMP/Photoshop. Our program supplies a coordinate on the texture (known as a "),s("em",[t._v("texture coordinate")]),t._v("), and the sampler then returns the corresponding color based on the texture and some internal parameters.")]),t._v(" "),s("p",[t._v("Let's define our "),s("code",[t._v("diffuse_texture_view")]),t._v(" and "),s("code",[t._v("diffuse_sampler")]),t._v(" now:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need to configure the texture view much, so let's")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let wgpu define it.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_sampler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("address_mode_*")]),t._v(" parameters determine what to do if the sampler gets a texture coordinate that's outside the texture itself. We have a few options to choose from:")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("ClampToEdge")]),t._v(": Any texture coordinates outside the texture will return the color of the nearest pixel on the edges of the texture.")]),t._v(" "),s("li",[s("code",[t._v("Repeat")]),t._v(": The texture will repeat as texture coordinates exceed the texture's dimensions.")]),t._v(" "),s("li",[s("code",[t._v("MirrorRepeat")]),t._v(": Similar to "),s("code",[t._v("Repeat")]),t._v(", but the image will flip when going over boundaries.")])]),t._v(" "),s("p",[s("img",{attrs:{src:a(335),alt:"address_mode.png"}})]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("mag_filter")]),t._v(" and "),s("code",[t._v("min_filter")]),t._v(" fields describe what to do when the sample footprint is smaller or larger than one texel. These two fields usually work when the mapping in the scene is far from or close to the camera.")]),t._v(" "),s("p",[t._v("There are two options:")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("Linear")]),t._v(": Select two texels in each dimension and return a linear interpolation between their values.")]),t._v(" "),s("li",[s("code",[t._v("Nearest")]),t._v(": Return the texel value nearest to the texture coordinates. This creates an image that's crisper from far away but pixelated up close. This can be desirable, however, if your textures are designed to be pixelated, like in pixel art games or voxel games like Minecraft.")])]),t._v(" "),s("p",[t._v("Mipmaps are a complex topic and will require their own section in the future. For now, we can say that "),s("code",[t._v("mipmap_filter")]),t._v(" functions are similar to "),s("code",[t._v("(mag/min)_filter")]),t._v(" as it tells the sampler how to blend between mipmaps.")]),t._v(" "),s("p",[t._v("I'm using some defaults for the other fields. If you want to see what they are, check "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SamplerDescriptor.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("the wgpu docs"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("All these different resources are nice and all, but they don't do us much good if we can't plug them in anywhere. This is where "),s("code",[t._v("BindGroup")]),t._v("s and "),s("code",[t._v("PipelineLayout")]),t._v("s come in.")]),t._v(" "),s("h2",{attrs:{id:"the-bindgroup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-bindgroup"}},[t._v("#")]),t._v(" The BindGroup")]),t._v(" "),s("p",[t._v("A "),s("code",[t._v("BindGroup")]),t._v(" describes a set of resources and how they can be accessed by a shader. We create a "),s("code",[t._v("BindGroup")]),t._v(" using a "),s("code",[t._v("BindGroupLayout")]),t._v(". Let's make one of those first.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This should match the filterable field of the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// corresponding Texture entry above.")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Our "),s("code",[t._v("texture_bind_group_layout")]),t._v(" has two entries: one for a sampled texture at binding 0 and one for a sampler at binding 1. Both of these bindings are visible only to the fragment shader as specified by "),s("code",[t._v("FRAGMENT")]),t._v(". The possible values for this field are any bitwise combination of "),s("code",[t._v("NONE")]),t._v(", "),s("code",[t._v("VERTEX")]),t._v(", "),s("code",[t._v("FRAGMENT")]),t._v(", or "),s("code",[t._v("COMPUTE")]),t._v(". Most of the time, we'll only use "),s("code",[t._v("FRAGMENT")]),t._v(" for textures and samplers, but it's good to know what else is available.")]),t._v(" "),s("p",[t._v("With "),s("code",[t._v("texture_bind_group_layout")]),t._v(", we can now create our "),s("code",[t._v("BindGroup")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture_view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Looking at this, you might get a bit of déjà vu! That's because a "),s("code",[t._v("BindGroup")]),t._v(" is a more specific declaration of the "),s("code",[t._v("BindGroupLayout")]),t._v(". The reason they're separate is that it allows us to swap out "),s("code",[t._v("BindGroup")]),t._v("s on the fly, so long as they all share the same "),s("code",[t._v("BindGroupLayout")]),t._v(". Each texture and sampler we create will need to be added to a "),s("code",[t._v("BindGroup")]),t._v(". For our purposes, we'll create a new bind group for each texture.")]),t._v(" "),s("p",[t._v("Now that we have our "),s("code",[t._v("diffuse_bind_group")]),t._v(", let's add it to our "),s("code",[t._v("State")]),t._v(" struct:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Make sure we return these fields in the "),s("code",[t._v("new")]),t._v(" method:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we've got our "),s("code",[t._v("BindGroup")]),t._v(", we can use it in our "),s("code",[t._v("render()")]),t._v(" function.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"pipelinelayout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pipelinelayout"}},[t._v("#")]),t._v(" PipelineLayout")]),t._v(" "),s("p",[t._v("Remember the "),s("code",[t._v("PipelineLayout")]),t._v(" we created back in "),s("a",{attrs:{href:"learn-wgpu/beginner/tutorial3-pipeline#how-do-we-use-the-shaders"}},[t._v("the pipeline section")]),t._v("? Now, we finally get to use it! The "),s("code",[t._v("PipelineLayout")]),t._v(" contains a list of "),s("code",[t._v("BindGroupLayout")]),t._v("s that the pipeline can use. Modify "),s("code",[t._v("render_pipeline_layout")]),t._v(" to use our "),s("code",[t._v("texture_bind_group_layout")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"a-change-to-the-vertices"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-change-to-the-vertices"}},[t._v("#")]),t._v(" A change to the VERTICES")]),t._v(" "),s("p",[t._v("There are a few things we need to change about our "),s("code",[t._v("Vertex")]),t._v(" definition. Up to now, we've been using a "),s("code",[t._v("color")]),t._v(" attribute to set the color of our mesh. Now that we're using a texture, we want to replace our "),s("code",[t._v("color")]),t._v(" with "),s("code",[t._v("tex_coords")]),t._v(". These coordinates will then be passed to the "),s("code",[t._v("Sampler")]),t._v(" to retrieve the appropriate color.")]),t._v(" "),s("p",[t._v("Since our "),s("code",[t._v("tex_coords")]),t._v(" are two-dimensional, we'll change the field to take two floats instead of three.")]),t._v(" "),s("p",[t._v("First, we'll change the "),s("code",[t._v("Vertex")]),t._v(" struct:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("And then reflect these changes in the "),s("code",[t._v("VertexBufferLayout")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Lastly, we need to change "),s("code",[t._v("VERTICES")]),t._v(" itself. Replace the existing definition with the following:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.99240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.56958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.05060294")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1526709")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.7347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"shader-time"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shader-time"}},[t._v("#")]),t._v(" Shader time")]),t._v(" "),s("p",[t._v("With our new "),s("code",[t._v("Vertex")]),t._v(" structure in place, it's time to update our shaders. We'll first need to pass our "),s("code",[t._v("tex_coords")]),t._v(" into the vertex shader and then use them over to our fragment shader to get the final color from the "),s("code",[t._v("Sampler")]),t._v(". Let's start with the vertex shader:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our vertex shader outputting our "),s("code",[t._v("tex_coords")]),t._v(", we need to change the fragment shader to take them in. With these coordinates, we'll finally be able to use our sampler to get a color from our texture.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_2d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The variables "),s("code",[t._v("t_diffuse")]),t._v(" and "),s("code",[t._v("s_diffuse")]),t._v(" are what's known as uniforms. We'll go over uniforms more in the "),s("RouterLink",{attrs:{to:"/beginner/tutorial6-uniforms/"}},[t._v("cameras section")]),t._v(". For now, all we need to know is that "),s("code",[t._v("group()")]),t._v(" corresponds to the 1st parameter in "),s("code",[t._v("set_bind_group()")]),t._v(" and "),s("code",[t._v("binding()")]),t._v(" relates to the "),s("code",[t._v("binding")]),t._v(" specified when we created the "),s("code",[t._v("BindGroupLayout")]),t._v(" and "),s("code",[t._v("BindGroup")]),t._v(".")],1),t._v(" "),s("h2",{attrs:{id:"the-results"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-results"}},[t._v("#")]),t._v(" The results")]),t._v(" "),s("p",[t._v("If we run our program now, we should get the following result:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(336),alt:"an upside down tree on a pentagon"}})]),t._v(" "),s("p",[t._v("That's weird. Our tree is upside down! This is because wgpu's world coordinates have the y-axis pointing up, while texture coordinates have the y-axis pointing down. In other words, (0, 0) in texture coordinates corresponds to the top-left of the image, while (1, 1) is the bottom right.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(337),alt:"happy-tree-uv-coords.png"}})]),t._v(" "),s("p",[t._v("We can get our triangle right-side up by replacing the y coordinate "),s("code",[t._v("y")]),t._v(" of each texture coordinate with "),s("code",[t._v("1 - y")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.00759614")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.43041354")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.949397")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.84732914")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2652641")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that in place, we now have our tree right-side up on our pentagon:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(338),alt:"our happy tree as it should be"}})]),t._v(" "),s("h2",{attrs:{id:"cleaning-things-up"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-things-up"}},[t._v("#")]),t._v(" Cleaning things up")]),t._v(" "),s("p",[t._v("For convenience, let's pull our texture code into its own module. We'll first need to add the "),s("a",{attrs:{href:"https://docs.rs/anyhow/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),s("OutboundLink")],1),t._v(" crate to our "),s("code",[t._v("Cargo.toml")]),t._v(" file to simplify error handling;")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.28"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.10"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.12"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# NEW!")]),t._v("\n")])])]),s("p",[t._v("Then, in a new file called "),s("code",[t._v("src/texture.rs")]),t._v(", add the following:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rgba "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("rgba"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Notice that we're using "),s("code",[t._v("to_rgba8()")]),t._v(" instead of "),s("code",[t._v("as_rgba8()")]),t._v(". PNGs work fine with "),s("code",[t._v("as_rgba8()")]),t._v(", as they have an alpha channel. But JPEGs don't have an alpha channel, and the code would panic if we try to call "),s("code",[t._v("as_rgba8()")]),t._v(" on the JPEG texture image we are going to use. Instead, we can use "),s("code",[t._v("to_rgba8()")]),t._v(" to handle such an image, which will generate a new image buffer with an alpha channel even if the original image does not have one.")])]),t._v(" "),s("p",[t._v("We need to import "),s("code",[t._v("texture.rs")]),t._v(" as a module, so at the top of "),s("code",[t._v("lib.rs")]),t._v(" add the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The texture creation code in "),s("code",[t._v("new()")]),t._v(" now gets a lot simpler:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Everything up until `let texture_bind_group_layout = ...` can now be removed.")]),t._v("\n")])])]),s("p",[t._v("We still need to store the bind group separately so that "),s("code",[t._v("Texture")]),t._v(" doesn't need to know how the "),s("code",[t._v("BindGroup")]),t._v(" is laid out. The creation of "),s("code",[t._v("diffuse_bind_group")]),t._v(" slightly changes to use the "),s("code",[t._v("view")]),t._v(" and "),s("code",[t._v("sampler")]),t._v(" fields of "),s("code",[t._v("diffuse_texture")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Finally, let's update our "),s("code",[t._v("State")]),t._v(" field to use our shiny new "),s("code",[t._v("Texture")]),t._v(" struct, as we'll need it in future tutorials.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Phew!")]),t._v(" "),s("p",[t._v("With these changes in place, the code should be working the same as before, but we now have a much easier way to create textures.")]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Create another texture and swap it out when you press the space key.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial5_textures"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{336:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},337:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},338:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},339:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},340:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.eb2186c8.png"},436:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"textures-and-bind-groups"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#textures-and-bind-groups"}},[t._v("#")]),t._v(" Textures and bind groups")]),t._v(" "),s("p",[t._v("Up to this point, we have been drawing super simple shapes. While we can make a game with just triangles, trying to draw highly detailed objects would massively limit what devices could even run our game. However, we can get around this problem with "),s("strong",[t._v("textures")]),t._v(".")]),t._v(" "),s("p",[t._v("Textures are images overlaid on a triangle mesh to make it seem more detailed. There are multiple types of textures, such as normal maps, bump maps, specular maps, and diffuse maps. We're going to talk about diffuse maps or, more simply, the color texture.")]),t._v(" "),s("h2",{attrs:{id:"loading-an-image-from-a-file"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-an-image-from-a-file"}},[t._v("#")]),t._v(" Loading an image from a file")]),t._v(" "),s("p",[t._v("If we want to map an image to our mesh, we first need an image. Let's use this happy little tree:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(336),alt:"a happy tree"}})]),t._v(" "),s("p",[t._v("We'll use the "),s("a",{attrs:{href:"https://docs.rs/image",target:"_blank",rel:"noopener noreferrer"}},[t._v("image crate"),s("OutboundLink")],1),t._v(" to load our tree. Let's add it to our dependencies:")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies.image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.24"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("default-features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"jpeg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("The jpeg decoder that "),s("code",[t._v("image")]),t._v(" includes uses "),s("a",{attrs:{href:"https://docs.rs/rayon",target:"_blank",rel:"noopener noreferrer"}},[t._v("rayon"),s("OutboundLink")],1),t._v(" to speed up the decoding with threads. WASM doesn't support threads currently, so we need to disable this so our code won't crash when we try to load a jpeg on the web.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Decoding jpegs in WASM isn't very performant. If you want to speed up image loading in general in WASM, you could opt to use the browser's built-in decoders instead of "),s("code",[t._v("image")]),t._v(" when building with "),s("code",[t._v("wasm-bindgen")]),t._v(". This will involve creating an "),s("code",[t._v("")]),t._v(" tag in Rust to get the image and then a "),s("code",[t._v("")]),t._v(" to get the pixel data, but I'll leave this as an exercise for the reader.")])]),t._v(" "),s("p",[t._v("In "),s("code",[t._v("State")]),t._v("'s "),s("code",[t._v("new()")]),t._v(" method, add the following just after configuring the "),s("code",[t._v("surface")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_image "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_rgba "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Here, we grab the bytes from our image file and load them into an image, which is then converted into a "),s("code",[t._v("Vec")]),t._v(" of RGBA bytes. We also save the image's dimensions for when we create the actual "),s("code",[t._v("Texture")]),t._v(".")]),t._v(" "),s("p",[t._v("Now, let's create the "),s("code",[t._v("Texture")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All textures are stored as 3D, we represent our 2D texture")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// by setting depth to 1.")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll talk about this a little later")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Most images are stored using sRGB, so we need to reflect that here.")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TEXTURE_BINDING tells wgpu that we want to use this texture in shaders")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// COPY_DST means that we want to copy data to this texture")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_texture"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is the same as with the SurfaceConfig. It")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// specifies what texture formats can be used to")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create TextureViews for this texture. The base")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// texture format (Rgba8UnormSrgb in this case) is")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// always supported. Note that using a different")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// texture format is not supported on the WebGL2")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// backend.")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"getting-data-into-a-texture"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-into-a-texture"}},[t._v("#")]),t._v(" Getting data into a Texture")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("Texture")]),t._v(" struct has no methods to interact with the data directly. However, we can use a method on the "),s("code",[t._v("queue")]),t._v(" we created earlier called "),s("code",[t._v("write_texture")]),t._v(" to load in the texture. Let's take a look at how we do that:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tells wgpu where to copy the pixel data")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The actual pixel data")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The layout of the texture")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("The old way of writing data to a texture was to copy the pixel data to a buffer and then copy it to the texture. Using "),s("code",[t._v("write_texture")]),t._v(" is a bit more efficient as it uses one buffer less - I'll leave it here, though, in case you need it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Temp Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_buffer_copy_encoder"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nencoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_buffer_to_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n array_layer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nqueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("bytes_per_row")]),t._v(" field needs some consideration. This value needs to be a multiple of 256. Check out "),s("RouterLink",{attrs:{to:"/showcase/gifs/#how-do-we-make-the-frames"}},[t._v("the gif tutorial")]),t._v(" for more details.")],1)]),t._v(" "),s("h2",{attrs:{id:"textureviews-and-samplers"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#textureviews-and-samplers"}},[t._v("#")]),t._v(" TextureViews and Samplers")]),t._v(" "),s("p",[t._v("Now that our texture has data in it, we need a way to use it. This is where a "),s("code",[t._v("TextureView")]),t._v(" and a "),s("code",[t._v("Sampler")]),t._v(" come in. A "),s("code",[t._v("TextureView")]),t._v(" offers us a "),s("em",[t._v("view")]),t._v(" into our texture. A "),s("code",[t._v("Sampler")]),t._v(" controls how the "),s("code",[t._v("Texture")]),t._v(" is "),s("em",[t._v("sampled")]),t._v(". Sampling works similar to the eyedropper tool in GIMP/Photoshop. Our program supplies a coordinate on the texture (known as a "),s("em",[t._v("texture coordinate")]),t._v("), and the sampler then returns the corresponding color based on the texture and some internal parameters.")]),t._v(" "),s("p",[t._v("Let's define our "),s("code",[t._v("diffuse_texture_view")]),t._v(" and "),s("code",[t._v("diffuse_sampler")]),t._v(" now:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need to configure the texture view much, so let's")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let wgpu define it.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_sampler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("address_mode_*")]),t._v(" parameters determine what to do if the sampler gets a texture coordinate that's outside the texture itself. We have a few options to choose from:")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("ClampToEdge")]),t._v(": Any texture coordinates outside the texture will return the color of the nearest pixel on the edges of the texture.")]),t._v(" "),s("li",[s("code",[t._v("Repeat")]),t._v(": The texture will repeat as texture coordinates exceed the texture's dimensions.")]),t._v(" "),s("li",[s("code",[t._v("MirrorRepeat")]),t._v(": Similar to "),s("code",[t._v("Repeat")]),t._v(", but the image will flip when going over boundaries.")])]),t._v(" "),s("p",[s("img",{attrs:{src:a(337),alt:"address_mode.png"}})]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("mag_filter")]),t._v(" and "),s("code",[t._v("min_filter")]),t._v(" fields describe what to do when the sample footprint is smaller or larger than one texel. These two fields usually work when the mapping in the scene is far from or close to the camera.")]),t._v(" "),s("p",[t._v("There are two options:")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("Linear")]),t._v(": Select two texels in each dimension and return a linear interpolation between their values.")]),t._v(" "),s("li",[s("code",[t._v("Nearest")]),t._v(": Return the texel value nearest to the texture coordinates. This creates an image that's crisper from far away but pixelated up close. This can be desirable, however, if your textures are designed to be pixelated, like in pixel art games or voxel games like Minecraft.")])]),t._v(" "),s("p",[t._v("Mipmaps are a complex topic and will require their own section in the future. For now, we can say that "),s("code",[t._v("mipmap_filter")]),t._v(" functions are similar to "),s("code",[t._v("(mag/min)_filter")]),t._v(" as it tells the sampler how to blend between mipmaps.")]),t._v(" "),s("p",[t._v("I'm using some defaults for the other fields. If you want to see what they are, check "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SamplerDescriptor.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("the wgpu docs"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("All these different resources are nice and all, but they don't do us much good if we can't plug them in anywhere. This is where "),s("code",[t._v("BindGroup")]),t._v("s and "),s("code",[t._v("PipelineLayout")]),t._v("s come in.")]),t._v(" "),s("h2",{attrs:{id:"the-bindgroup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-bindgroup"}},[t._v("#")]),t._v(" The BindGroup")]),t._v(" "),s("p",[t._v("A "),s("code",[t._v("BindGroup")]),t._v(" describes a set of resources and how they can be accessed by a shader. We create a "),s("code",[t._v("BindGroup")]),t._v(" using a "),s("code",[t._v("BindGroupLayout")]),t._v(". Let's make one of those first.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This should match the filterable field of the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// corresponding Texture entry above.")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Our "),s("code",[t._v("texture_bind_group_layout")]),t._v(" has two entries: one for a sampled texture at binding 0 and one for a sampler at binding 1. Both of these bindings are visible only to the fragment shader as specified by "),s("code",[t._v("FRAGMENT")]),t._v(". The possible values for this field are any bitwise combination of "),s("code",[t._v("NONE")]),t._v(", "),s("code",[t._v("VERTEX")]),t._v(", "),s("code",[t._v("FRAGMENT")]),t._v(", or "),s("code",[t._v("COMPUTE")]),t._v(". Most of the time, we'll only use "),s("code",[t._v("FRAGMENT")]),t._v(" for textures and samplers, but it's good to know what else is available.")]),t._v(" "),s("p",[t._v("With "),s("code",[t._v("texture_bind_group_layout")]),t._v(", we can now create our "),s("code",[t._v("BindGroup")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture_view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Looking at this, you might get a bit of déjà vu! That's because a "),s("code",[t._v("BindGroup")]),t._v(" is a more specific declaration of the "),s("code",[t._v("BindGroupLayout")]),t._v(". The reason they're separate is that it allows us to swap out "),s("code",[t._v("BindGroup")]),t._v("s on the fly, so long as they all share the same "),s("code",[t._v("BindGroupLayout")]),t._v(". Each texture and sampler we create will need to be added to a "),s("code",[t._v("BindGroup")]),t._v(". For our purposes, we'll create a new bind group for each texture.")]),t._v(" "),s("p",[t._v("Now that we have our "),s("code",[t._v("diffuse_bind_group")]),t._v(", let's add it to our "),s("code",[t._v("State")]),t._v(" struct:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Make sure we return these fields in the "),s("code",[t._v("new")]),t._v(" method:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we've got our "),s("code",[t._v("BindGroup")]),t._v(", we can use it in our "),s("code",[t._v("render()")]),t._v(" function.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"pipelinelayout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pipelinelayout"}},[t._v("#")]),t._v(" PipelineLayout")]),t._v(" "),s("p",[t._v("Remember the "),s("code",[t._v("PipelineLayout")]),t._v(" we created back in "),s("a",{attrs:{href:"learn-wgpu/beginner/tutorial3-pipeline#how-do-we-use-the-shaders"}},[t._v("the pipeline section")]),t._v("? Now, we finally get to use it! The "),s("code",[t._v("PipelineLayout")]),t._v(" contains a list of "),s("code",[t._v("BindGroupLayout")]),t._v("s that the pipeline can use. Modify "),s("code",[t._v("render_pipeline_layout")]),t._v(" to use our "),s("code",[t._v("texture_bind_group_layout")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"a-change-to-the-vertices"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-change-to-the-vertices"}},[t._v("#")]),t._v(" A change to the VERTICES")]),t._v(" "),s("p",[t._v("There are a few things we need to change about our "),s("code",[t._v("Vertex")]),t._v(" definition. Up to now, we've been using a "),s("code",[t._v("color")]),t._v(" attribute to set the color of our mesh. Now that we're using a texture, we want to replace our "),s("code",[t._v("color")]),t._v(" with "),s("code",[t._v("tex_coords")]),t._v(". These coordinates will then be passed to the "),s("code",[t._v("Sampler")]),t._v(" to retrieve the appropriate color.")]),t._v(" "),s("p",[t._v("Since our "),s("code",[t._v("tex_coords")]),t._v(" are two-dimensional, we'll change the field to take two floats instead of three.")]),t._v(" "),s("p",[t._v("First, we'll change the "),s("code",[t._v("Vertex")]),t._v(" struct:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("And then reflect these changes in the "),s("code",[t._v("VertexBufferLayout")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Lastly, we need to change "),s("code",[t._v("VERTICES")]),t._v(" itself. Replace the existing definition with the following:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.99240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.56958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.05060294")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1526709")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.7347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"shader-time"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shader-time"}},[t._v("#")]),t._v(" Shader time")]),t._v(" "),s("p",[t._v("With our new "),s("code",[t._v("Vertex")]),t._v(" structure in place, it's time to update our shaders. We'll first need to pass our "),s("code",[t._v("tex_coords")]),t._v(" into the vertex shader and then use them over to our fragment shader to get the final color from the "),s("code",[t._v("Sampler")]),t._v(". Let's start with the vertex shader:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our vertex shader outputting our "),s("code",[t._v("tex_coords")]),t._v(", we need to change the fragment shader to take them in. With these coordinates, we'll finally be able to use our sampler to get a color from our texture.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_2d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureSample")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" s_diffuse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The variables "),s("code",[t._v("t_diffuse")]),t._v(" and "),s("code",[t._v("s_diffuse")]),t._v(" are what's known as uniforms. We'll go over uniforms more in the "),s("RouterLink",{attrs:{to:"/beginner/tutorial6-uniforms/"}},[t._v("cameras section")]),t._v(". For now, all we need to know is that "),s("code",[t._v("group()")]),t._v(" corresponds to the 1st parameter in "),s("code",[t._v("set_bind_group()")]),t._v(" and "),s("code",[t._v("binding()")]),t._v(" relates to the "),s("code",[t._v("binding")]),t._v(" specified when we created the "),s("code",[t._v("BindGroupLayout")]),t._v(" and "),s("code",[t._v("BindGroup")]),t._v(".")],1),t._v(" "),s("h2",{attrs:{id:"the-results"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-results"}},[t._v("#")]),t._v(" The results")]),t._v(" "),s("p",[t._v("If we run our program now, we should get the following result:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(338),alt:"an upside down tree on a pentagon"}})]),t._v(" "),s("p",[t._v("That's weird. Our tree is upside down! This is because wgpu's world coordinates have the y-axis pointing up, while texture coordinates have the y-axis pointing down. In other words, (0, 0) in texture coordinates corresponds to the top-left of the image, while (1, 1) is the bottom right.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(339),alt:"happy-tree-uv-coords.png"}})]),t._v(" "),s("p",[t._v("We can get our triangle right-side up by replacing the y coordinate "),s("code",[t._v("y")]),t._v(" of each texture coordinate with "),s("code",[t._v("1 - y")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.00759614")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.43041354")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.949397")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.84732914")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2652641")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that in place, we now have our tree right-side up on our pentagon:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(340),alt:"our happy tree as it should be"}})]),t._v(" "),s("h2",{attrs:{id:"cleaning-things-up"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-things-up"}},[t._v("#")]),t._v(" Cleaning things up")]),t._v(" "),s("p",[t._v("For convenience, let's pull our texture code into its own module. We'll first need to add the "),s("a",{attrs:{href:"https://docs.rs/anyhow/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),s("OutboundLink")],1),t._v(" crate to our "),s("code",[t._v("Cargo.toml")]),t._v(" file to simplify error handling;")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.28"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.10"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.12"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# NEW!")]),t._v("\n")])])]),s("p",[t._v("Then, in a new file called "),s("code",[t._v("src/texture.rs")]),t._v(", add the following:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rgba "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("rgba"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Notice that we're using "),s("code",[t._v("to_rgba8()")]),t._v(" instead of "),s("code",[t._v("as_rgba8()")]),t._v(". PNGs work fine with "),s("code",[t._v("as_rgba8()")]),t._v(", as they have an alpha channel. But JPEGs don't have an alpha channel, and the code would panic if we try to call "),s("code",[t._v("as_rgba8()")]),t._v(" on the JPEG texture image we are going to use. Instead, we can use "),s("code",[t._v("to_rgba8()")]),t._v(" to handle such an image, which will generate a new image buffer with an alpha channel even if the original image does not have one.")])]),t._v(" "),s("p",[t._v("We need to import "),s("code",[t._v("texture.rs")]),t._v(" as a module, so at the top of "),s("code",[t._v("lib.rs")]),t._v(" add the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The texture creation code in "),s("code",[t._v("new()")]),t._v(" now gets a lot simpler:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Everything up until `let texture_bind_group_layout = ...` can now be removed.")]),t._v("\n")])])]),s("p",[t._v("We still need to store the bind group separately so that "),s("code",[t._v("Texture")]),t._v(" doesn't need to know how the "),s("code",[t._v("BindGroup")]),t._v(" is laid out. The creation of "),s("code",[t._v("diffuse_bind_group")]),t._v(" slightly changes to use the "),s("code",[t._v("view")]),t._v(" and "),s("code",[t._v("sampler")]),t._v(" fields of "),s("code",[t._v("diffuse_texture")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Finally, let's update our "),s("code",[t._v("State")]),t._v(" field to use our shiny new "),s("code",[t._v("Texture")]),t._v(" struct, as we'll need it in future tutorials.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Phew!")]),t._v(" "),s("p",[t._v("With these changes in place, the code should be working the same as before, but we now have a much easier way to create textures.")]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Create another texture and swap it out when you press the space key.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial5_textures"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/29.ea2d6bbf.js b/assets/js/29.399c33dc.js similarity index 98% rename from assets/js/29.ea2d6bbf.js rename to assets/js/29.399c33dc.js index c6a30465..1f3eb6a8 100644 --- a/assets/js/29.ea2d6bbf.js +++ b/assets/js/29.399c33dc.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29,45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return o})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return u})),n.d(e,"b",(function(){return f})),n.d(e,"e",(function(){return d})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return p})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(93);const r=/#.*$/,i=/\.(md|html)$/,a=/\/$/,s=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function l(t){return decodeURI(t).replace(r,"").replace(i,"")}function o(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function u(t){return/^tel:/.test(t)}function f(t){if(o(t))return t;const e=t.match(r),n=e?e[0]:"",i=l(t);return a.test(i)?t:i+".html"+n}function d(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return l(t.path)===l(e)}function h(t,e,n){if(o(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const l=s.sidebar||a.sidebar;if(l){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,l);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const a=e.children||[];return 0===a.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},286:function(t,e,n){"use strict";n.r(e);var r=n(261),i={props:{item:{required:!0}},computed:{link(){return Object(r.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:r.f,isMailto:r.g,isTel:r.h}},a=n(7),s=Object(a.a)(i,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=s.exports},298:function(t,e,n){},306:function(t,e,n){"use strict";n(298)},318:function(t,e,n){"use strict";n.r(e);var r={components:{NavLink:n(286).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(n(306),n(7)),a=Object(i.a)(r,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v(t._s(t.data.heroText||t.$title||"Hello"))]):t._e(),t._v(" "),e("p",{staticClass:"description"},[t._v(t._s(t.data.tagline||t.$description||"Welcome to your VuePress site"))]),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,r){return e("div",{key:r,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v(t._s(t.data.footer))]):t._e()],1)}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[29,45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return o})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return u})),n.d(e,"b",(function(){return f})),n.d(e,"e",(function(){return d})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return p})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(92);const r=/#.*$/,i=/\.(md|html)$/,a=/\/$/,s=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function l(t){return decodeURI(t).replace(r,"").replace(i,"")}function o(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function u(t){return/^tel:/.test(t)}function f(t){if(o(t))return t;const e=t.match(r),n=e?e[0]:"",i=l(t);return a.test(i)?t:i+".html"+n}function d(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return l(t.path)===l(e)}function h(t,e,n){if(o(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const l=s.sidebar||a.sidebar;if(l){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,l);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const a=e.children||[];return 0===a.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},286:function(t,e,n){"use strict";n.r(e);var r=n(261),i={props:{item:{required:!0}},computed:{link(){return Object(r.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:r.f,isMailto:r.g,isTel:r.h}},a=n(7),s=Object(a.a)(i,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=s.exports},298:function(t,e,n){},306:function(t,e,n){"use strict";n(298)},318:function(t,e,n){"use strict";n.r(e);var r={components:{NavLink:n(286).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(n(306),n(7)),a=Object(i.a)(r,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v(t._s(t.data.heroText||t.$title||"Hello"))]):t._e(),t._v(" "),e("p",{staticClass:"description"},[t._v(t._s(t.data.tagline||t.$description||"Welcome to your VuePress site"))]),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,r){return e("div",{key:r,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v(t._s(t.data.footer))]):t._e()],1)}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/3.6221c182.js b/assets/js/3.5ec857bc.js similarity index 98% rename from assets/js/3.6221c182.js rename to assets/js/3.5ec857bc.js index f2d787fc..038ad47e 100644 --- a/assets/js/3.6221c182.js +++ b/assets/js/3.5ec857bc.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3,35,39],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(93);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,a=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return s.test(i)?t:i+".html"+n}function h(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=a.sidebar||s.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return d(n,e,r);if(Array.isArray(e))return Object.assign(d(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(d(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},287:function(t,e,n){"use strict";n.r(e);var r={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(288),n(7)),s=Object(i.a)(r,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},288:function(t,e,n){"use strict";n(285)},290:function(t,e,n){},292:function(t,e,n){},294:function(t,e,n){"use strict";n(290)},295:function(t,e,n){"use strict";n.r(e);var r=n(305),i=n(297),s=n(261);var a={name:"SidebarLinks",components:{SidebarGroup:r.default,SidebarLink:i.default},props:["items","depth","sidebarDepth"],data:()=>({openGroupIndex:0}),created(){this.refreshIndex()},watch:{$route(){this.refreshIndex()}},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n"page"===e.type&&Object(s.e)(t,e.path)))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},o=n(7),l=Object(o.a)(a,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,r){return e("li",{key:r},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:r===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(r)}}}):e("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},297:function(t,e,n){"use strict";n.r(e);var r=n(261);function i(t,e,n,r){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}},n)}function s(t,e,n,a,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(r.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,u),s(t,e.children,n,a,o,l+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:l},props:{item:u,sidebarDepth:c}}){const p=Object(r.e)(a,u.path),h="auto"===u.type?p||u.children.some(t=>Object(r.e)(a,u.basePath+"#"+t.slug)):p,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):i(t,u.path,u.title||u.path,h),f=e.frontmatter.sidebarDepth||c||l.sidebarDepth||o.sidebarDepth,b=null==f?1:f,g=l.displayAllHeaders||o.displayAllHeaders;if("auto"===u.type)return[d,s(t,u.children,u.basePath,a,b)];if((h||g)&&u.headers&&!r.d.test(u.path)){return[d,s(t,Object(r.c)(u.headers),u.path,a,b)]}return d}},o=(n(294),n(7)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},302:function(t,e,n){"use strict";n(292)},305:function(t,e,n){"use strict";n.r(e);var r=n(261),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:n(287).default},beforeCreate(){this.$options.components.SidebarLinks=n(295).default},methods:{isActive:r.e}},s=(n(302),n(7)),a=Object(s.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("router-link",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,sidebarDepth:t.item.sidebarDepth,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[3,35,39],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(92);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,a=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return s.test(i)?t:i+".html"+n}function h(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=a.sidebar||s.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return d(n,e,r);if(Array.isArray(e))return Object.assign(d(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(d(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},285:function(t,e,n){},287:function(t,e,n){"use strict";n.r(e);var r={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(288),n(7)),s=Object(i.a)(r,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},288:function(t,e,n){"use strict";n(285)},290:function(t,e,n){},292:function(t,e,n){},294:function(t,e,n){"use strict";n(290)},295:function(t,e,n){"use strict";n.r(e);var r=n(305),i=n(297),s=n(261);var a={name:"SidebarLinks",components:{SidebarGroup:r.default,SidebarLink:i.default},props:["items","depth","sidebarDepth"],data:()=>({openGroupIndex:0}),created(){this.refreshIndex()},watch:{$route(){this.refreshIndex()}},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n"page"===e.type&&Object(s.e)(t,e.path)))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},o=n(7),l=Object(o.a)(a,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,r){return e("li",{key:r},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:r===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(r)}}}):e("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},297:function(t,e,n){"use strict";n.r(e);var r=n(261);function i(t,e,n,r){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}},n)}function s(t,e,n,a,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(r.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,u),s(t,e.children,n,a,o,l+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:l},props:{item:u,sidebarDepth:c}}){const p=Object(r.e)(a,u.path),h="auto"===u.type?p||u.children.some(t=>Object(r.e)(a,u.basePath+"#"+t.slug)):p,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):i(t,u.path,u.title||u.path,h),f=e.frontmatter.sidebarDepth||c||l.sidebarDepth||o.sidebarDepth,b=null==f?1:f,g=l.displayAllHeaders||o.displayAllHeaders;if("auto"===u.type)return[d,s(t,u.children,u.basePath,a,b)];if((h||g)&&u.headers&&!r.d.test(u.path)){return[d,s(t,Object(r.c)(u.headers),u.path,a,b)]}return d}},o=(n(294),n(7)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},302:function(t,e,n){"use strict";n(292)},305:function(t,e,n){"use strict";n.r(e);var r=n(261),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:n(287).default},beforeCreate(){this.$options.components.SidebarLinks=n(295).default},methods:{isActive:r.e}},s=(n(302),n(7)),a=Object(s.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("router-link",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,sidebarDepth:t.item.sidebarDepth,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/30.af70eb26.js b/assets/js/30.12d50dcb.js similarity index 99% rename from assets/js/30.af70eb26.js rename to assets/js/30.12d50dcb.js index 1977983a..716af008 100644 --- a/assets/js/30.af70eb26.js +++ b/assets/js/30.12d50dcb.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{330:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},331:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},332:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},333:function(t,s){t.exports="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="},434:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"buffers-and-indices"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#buffers-and-indices"}},[t._v("#")]),t._v(" Buffers and Indices")]),t._v(" "),s("h2",{attrs:{id:"we-re-finally-talking-about-them"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#we-re-finally-talking-about-them"}},[t._v("#")]),t._v(" We're finally talking about them!")]),t._v(" "),s("p",[t._v("You were probably getting sick of me saying stuff like, \"We'll get to that when we talk about buffers\". Well, now's the time to finally talk about buffers, but first...")]),t._v(" "),s("h2",{attrs:{id:"what-is-a-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-buffer"}},[t._v("#")]),t._v(" What is a buffer?")]),t._v(" "),s("p",[t._v("A buffer is a blob of data on the GPU. A buffer is guaranteed to be contiguous, meaning that all the data is stored sequentially in memory. Buffers are generally used to store simple things like structs or arrays, but they can store more complex stuff such as graph structures like trees (provided all the nodes are stored together and don't reference anything outside the buffer). We are going to use buffers a lot, so let's get started with two of the most important ones: the vertex buffer and the index buffer.")]),t._v(" "),s("h2",{attrs:{id:"the-vertex-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-vertex-buffer"}},[t._v("#")]),t._v(" The vertex buffer")]),t._v(" "),s("p",[t._v("Previously, we've stored vertex data directly in the vertex shader. While that worked fine to get our bootstraps on, it simply won't do for the long term. The types of objects we need to draw will vary in size, and recompiling the shader whenever we need to update the model would massively slow down our program. Instead, we are going to use buffers to store the vertex data we want to draw. Before we do that, though, we need to describe what a vertex looks like. We'll do this by creating a new struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Our vertices will all have a position and a color. The position represents the x, y, and z of the vertex in 3d space. The color is the red, green, and blue values for the vertex. We need the "),s("code",[t._v("Vertex")]),t._v(" to be "),s("code",[t._v("Copy")]),t._v(" so we can create a buffer with it.")]),t._v(" "),s("p",[t._v("Next, we need the actual data that will make up our triangle. Below "),s("code",[t._v("Vertex")]),t._v(", add the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We arrange the vertices in counter-clockwise order: top, bottom left, bottom right. We do it this way partially out of tradition, but mostly because we specified in the "),s("code",[t._v("primitive")]),t._v(" of the "),s("code",[t._v("render_pipeline")]),t._v(" that we want the "),s("code",[t._v("front_face")]),t._v(" of our triangle to be "),s("code",[t._v("wgpu::FrontFace::Ccw")]),t._v(" so that we cull the back face. This means that any triangle that should be facing us should have its vertices in counter-clockwise order.")]),t._v(" "),s("p",[t._v("Now that we have our vertex data, we need to store it in a buffer. Let's add a "),s("code",[t._v("vertex_buffer")]),t._v(" field to "),s("code",[t._v("State")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now let's create the buffer in "),s("code",[t._v("new()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("To access the "),s("code",[t._v("create_buffer_init")]),t._v(" method on "),s("code",[t._v("wgpu::Device")]),t._v(", we'll have to import the "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/util/trait.DeviceExt.html#tymethod.create_buffer_init",target:"_blank",rel:"noopener noreferrer"}},[t._v("DeviceExt"),s("OutboundLink")],1),t._v(" extension trait. For more information on extension traits, check out "),s("a",{attrs:{href:"http://xion.io/post/code/rust-extension-traits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("To import the extension trait, put this line somewhere near the top of "),s("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("You'll note that we're using "),s("a",{attrs:{href:"https://docs.rs/bytemuck/latest/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck"),s("OutboundLink")],1),t._v(" to cast our "),s("code",[t._v("VERTICES")]),t._v(" as a "),s("code",[t._v("&[u8]")]),t._v(". The "),s("code",[t._v("create_buffer_init()")]),t._v(" method expects a "),s("code",[t._v("&[u8]")]),t._v(", and "),s("code",[t._v("bytemuck::cast_slice")]),t._v(" does that for us. Add the following to your "),s("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.12"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We're also going to need to implement two traits to get "),s("code",[t._v("bytemuck")]),t._v(" to work. These are "),s("a",{attrs:{href:"https://docs.rs/bytemuck/latest/bytemuck/trait.Pod.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Pod"),s("OutboundLink")],1),t._v(" and "),s("a",{attrs:{href:"https://docs.rs/bytemuck/latest/bytemuck/trait.Zeroable.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Zeroable"),s("OutboundLink")],1),t._v(". "),s("code",[t._v("Pod")]),t._v(" indicates that our "),s("code",[t._v("Vertex")]),t._v(' is "Plain Old Data", and thus can be interpreted as a '),s("code",[t._v("&[u8]")]),t._v(". "),s("code",[t._v("Zeroable")]),t._v(" indicates that we can use "),s("code",[t._v("std::mem::zeroed()")]),t._v(". We can modify our "),s("code",[t._v("Vertex")]),t._v(" struct to derive these methods.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("If your struct includes types that don't implement "),s("code",[t._v("Pod")]),t._v(" and "),s("code",[t._v("Zeroable")]),t._v(", you'll need to implement these traits manually. These traits don't require us to implement any methods, so we just need to use the following to get our code to work.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Zeroable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("Finally, we can add our "),s("code",[t._v("vertex_buffer")]),t._v(" to our "),s("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"so-what-do-i-do-with-it"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#so-what-do-i-do-with-it"}},[t._v("#")]),t._v(" So, what do I do with it?")]),t._v(" "),s("p",[t._v("We need to tell the "),s("code",[t._v("render_pipeline")]),t._v(" to use this buffer when we are drawing, but first, we need to tell the "),s("code",[t._v("render_pipeline")]),t._v(" how to read the buffer. We do this using "),s("code",[t._v("VertexBufferLayout")]),t._v("s and the "),s("code",[t._v("vertex_buffers")]),t._v(" field that I promised we'd talk about when we created the "),s("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),s("p",[t._v("A "),s("code",[t._v("VertexBufferLayout")]),t._v(" defines how a buffer is represented in memory. Without this, the render_pipeline has no idea how to map the buffer in the shader. Here's what the descriptor for a buffer full of "),s("code",[t._v("Vertex")]),t._v(" would look like.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 6.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",[s("li",[t._v("The "),s("code",[t._v("array_stride")]),t._v(" defines how wide a vertex is. When the shader goes to read the next vertex, it will skip over the "),s("code",[t._v("array_stride")]),t._v(" number of bytes. In our case, array_stride will probably be 24 bytes.")]),t._v(" "),s("li",[s("code",[t._v("step_mode")]),t._v(" tells the pipeline whether each element of the array in this buffer represents per-vertex data or per-instance data. We can specify "),s("code",[t._v("wgpu::VertexStepMode::Instance")]),t._v(" if we only want to change vertices when we start drawing a new instance. We'll cover instancing in a later tutorial.")]),t._v(" "),s("li",[t._v("Vertex attributes describe the individual parts of the vertex. Generally, this is a 1:1 mapping with a struct's fields, which is true in our case.")]),t._v(" "),s("li",[t._v("This defines the "),s("code",[t._v("offset")]),t._v(" in bytes until the attribute starts. For the first attribute, the offset is usually zero. For any later attributes, the offset is the sum over "),s("code",[t._v("size_of")]),t._v(" of the previous attributes' data.")]),t._v(" "),s("li",[t._v("This tells the shader what location to store this attribute at. For example, "),s("code",[t._v("@location(0) x: vec3")]),t._v(" in the vertex shader would correspond to the "),s("code",[t._v("position")]),t._v(" field of the "),s("code",[t._v("Vertex")]),t._v(" struct, while "),s("code",[t._v("@location(1) x: vec3")]),t._v(" would be the "),s("code",[t._v("color")]),t._v(" field.")]),t._v(" "),s("li",[s("code",[t._v("format")]),t._v(" tells the shader the shape of the attribute. "),s("code",[t._v("Float32x3")]),t._v(" corresponds to "),s("code",[t._v("vec3")]),t._v(" in shader code. The max value we can store in an attribute is "),s("code",[t._v("Float32x4")]),t._v(" ("),s("code",[t._v("Uint32x4")]),t._v(", and "),s("code",[t._v("Sint32x4")]),t._v(" work as well). We'll keep this in mind for when we have to store things that are bigger than "),s("code",[t._v("Float32x4")]),t._v(".")])]),t._v(" "),s("p",[t._v("For you visual learners, our vertex buffer looks like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(330),alt:"A figure of the VertexBufferLayout"}})]),t._v(" "),s("p",[t._v("Let's create a static method on "),s("code",[t._v("Vertex")]),t._v(" that returns this descriptor.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Specifying the attributes as we did now is quite verbose. We could use the "),s("code",[t._v("vertex_attr_array")]),t._v(" macro provided by wgpu to clean things up a bit. With it, our "),s("code",[t._v("VertexBufferLayout")]),t._v(" becomes")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("While this is definitely nice, Rust sees the result of "),s("code",[t._v("vertex_attr_array")]),t._v(" as a temporary value, so a tweak is required to return it from a function. We could "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/discussions/1790#discussioncomment-1160378",target:"_blank",rel:"noopener noreferrer"}},[t._v("make it "),s("code",[t._v("const")]),s("OutboundLink")],1),t._v(", as in the example below:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Regardless, I feel it's good to show how the data gets mapped, so I'll forgo using this macro for now.")])]),t._v(" "),s("p",[t._v("Now, we can use it when we create the "),s("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("One more thing: we need to actually set the vertex buffer in the render method. Otherwise, our program will crash.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("code",[t._v("set_vertex_buffer")]),t._v(" takes two parameters. The first is what buffer slot to use for this vertex buffer. You can have multiple vertex buffers set at a time.")]),t._v(" "),s("p",[t._v("The second parameter is the slice of the buffer to use. You can store as many objects in a buffer as your hardware allows, so "),s("code",[t._v("slice")]),t._v(" allows us to specify which portion of the buffer to use. We use "),s("code",[t._v("..")]),t._v(" to specify the entire buffer.")]),t._v(" "),s("p",[t._v("Before we continue, we should change the "),s("code",[t._v("render_pass.draw()")]),t._v(" call to use the number of vertices specified by "),s("code",[t._v("VERTICES")]),t._v(". Add a "),s("code",[t._v("num_vertices")]),t._v(" to "),s("code",[t._v("State")]),t._v(", and set it to be equal to "),s("code",[t._v("VERTICES.len()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Then, use it in the draw call.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Before our changes will have any effect, we need to update our vertex shader to get its data from the vertex buffer. We'll also have it include the vertex color as well.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("If you've done things correctly, you should see a triangle that looks something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(331),alt:"A colorful triangle"}})]),t._v(" "),s("h2",{attrs:{id:"the-index-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-index-buffer"}},[t._v("#")]),t._v(" The index buffer")]),t._v(" "),s("p",[t._v("We technically don't "),s("em",[t._v("need")]),t._v(" an index buffer, but they still are plenty useful. An index buffer comes into play when we start using models with a lot of triangles. Consider this pentagon.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(332),alt:"A pentagon made of 3 triangles"}})]),t._v(" "),s("p",[t._v("It has a total of 5 vertices and 3 triangles. Now, if we wanted to display something like this using just vertices, we would need something like the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("You'll note, though, that some of the vertices are used more than once. C and B are used twice, and E is repeated three times. Assuming that each float is 4 bytes, then that means of the 216 bytes we use for "),s("code",[t._v("VERTICES")]),t._v(", 96 of them are duplicate data. Wouldn't it be nice if we could list these vertices once? Well, we can! That's where an index buffer comes into play.")]),t._v(" "),s("p",[t._v("Basically, we store all the unique vertices in "),s("code",[t._v("VERTICES")]),t._v(", and we create another buffer that stores indices to elements in "),s("code",[t._v("VERTICES")]),t._v(" to create the triangles. Here's an example of that with our pentagon.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now, with this setup, our "),s("code",[t._v("VERTICES")]),t._v(" take up about 120 bytes and "),s("code",[t._v("INDICES")]),t._v(" is just 18 bytes, given that "),s("code",[t._v("u16")]),t._v(" is 2 bytes wide. In this case, wgpu automatically adds 2 extra bytes of padding to make sure the buffer is aligned to 4 bytes, but it's still just 20 bytes. Altogether, our pentagon is 140 bytes in total. That means we saved 76 bytes! It may not seem like much, but when dealing with tri counts in the hundreds of thousands, indexing saves a lot of memory.")]),t._v(" "),s("p",[t._v("There are a couple of things we need to change in order to use indexing. The first is we need to create a buffer to store the indices. In "),s("code",[t._v("State")]),t._v("'s "),s("code",[t._v("new()")]),t._v(" method, create the "),s("code",[t._v("index_buffer")]),t._v(" after you create the "),s("code",[t._v("vertex_buffer")]),t._v(". Also, change "),s("code",[t._v("num_vertices")]),t._v(" to "),s("code",[t._v("num_indices")]),t._v(" and set it equal to "),s("code",[t._v("INDICES.len()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_indices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We don't need to implement "),s("code",[t._v("Pod")]),t._v(" and "),s("code",[t._v("Zeroable")]),t._v(" for our indices because "),s("code",[t._v("bytemuck")]),t._v(" has already implemented them for basic types such as "),s("code",[t._v("u16")]),t._v(". That means we can just add "),s("code",[t._v("index_buffer")]),t._v(" and "),s("code",[t._v("num_indices")]),t._v(" to the "),s("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("And then populate these fields in the constructor:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("All we have to do now is update the "),s("code",[t._v("render()")]),t._v(" method to use the "),s("code",[t._v("index_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n")])])]),s("p",[t._v("A couple of things to note:")]),t._v(" "),s("ol",[s("li",[t._v("The method name is "),s("code",[t._v("set_index_buffer")]),t._v(", not "),s("code",[t._v("set_index_buffers")]),t._v(". You can only have one index buffer set at a time.")]),t._v(" "),s("li",[t._v("When using an index buffer, you need to use "),s("code",[t._v("draw_indexed")]),t._v(". The "),s("code",[t._v("draw")]),t._v(" method ignores the index buffer. Also, make sure you use the number of indices ("),s("code",[t._v("num_indices")]),t._v("), not vertices, as your model will either draw wrong or the method will "),s("code",[t._v("panic")]),t._v(" because there are not enough indices.")])]),t._v(" "),s("p",[t._v("With all that you should have a garishly magenta pentagon in your window.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(333),alt:"Magenta pentagon in window"}})]),t._v(" "),s("h2",{attrs:{id:"color-correction"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#color-correction"}},[t._v("#")]),t._v(" Color Correction")]),t._v(" "),s("p",[t._v("If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values, you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range, we get roughly (0.737254902, 0, 0.737254902). This is not the same as what we are using for our vertex colors, which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.")]),t._v(" "),s("p",[t._v("Most monitors use a color space known as sRGB. Our surface is (most likely depending on what is returned from "),s("code",[t._v("surface.get_preferred_format()")]),t._v(") using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than in lighter colors.")]),t._v(" "),s("p",[t._v("You get the correct color using the following formula: "),s("code",[t._v("srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4")]),t._v(". Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing a manual color conversion, you'll likely save a lot of time by using textures instead, as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.")]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial4_buffer"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{332:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},333:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},334:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},335:function(t,s){t.exports="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="},435:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"buffers-and-indices"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#buffers-and-indices"}},[t._v("#")]),t._v(" Buffers and Indices")]),t._v(" "),s("h2",{attrs:{id:"we-re-finally-talking-about-them"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#we-re-finally-talking-about-them"}},[t._v("#")]),t._v(" We're finally talking about them!")]),t._v(" "),s("p",[t._v("You were probably getting sick of me saying stuff like, \"We'll get to that when we talk about buffers\". Well, now's the time to finally talk about buffers, but first...")]),t._v(" "),s("h2",{attrs:{id:"what-is-a-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-buffer"}},[t._v("#")]),t._v(" What is a buffer?")]),t._v(" "),s("p",[t._v("A buffer is a blob of data on the GPU. A buffer is guaranteed to be contiguous, meaning that all the data is stored sequentially in memory. Buffers are generally used to store simple things like structs or arrays, but they can store more complex stuff such as graph structures like trees (provided all the nodes are stored together and don't reference anything outside the buffer). We are going to use buffers a lot, so let's get started with two of the most important ones: the vertex buffer and the index buffer.")]),t._v(" "),s("h2",{attrs:{id:"the-vertex-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-vertex-buffer"}},[t._v("#")]),t._v(" The vertex buffer")]),t._v(" "),s("p",[t._v("Previously, we've stored vertex data directly in the vertex shader. While that worked fine to get our bootstraps on, it simply won't do for the long term. The types of objects we need to draw will vary in size, and recompiling the shader whenever we need to update the model would massively slow down our program. Instead, we are going to use buffers to store the vertex data we want to draw. Before we do that, though, we need to describe what a vertex looks like. We'll do this by creating a new struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Our vertices will all have a position and a color. The position represents the x, y, and z of the vertex in 3d space. The color is the red, green, and blue values for the vertex. We need the "),s("code",[t._v("Vertex")]),t._v(" to be "),s("code",[t._v("Copy")]),t._v(" so we can create a buffer with it.")]),t._v(" "),s("p",[t._v("Next, we need the actual data that will make up our triangle. Below "),s("code",[t._v("Vertex")]),t._v(", add the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We arrange the vertices in counter-clockwise order: top, bottom left, bottom right. We do it this way partially out of tradition, but mostly because we specified in the "),s("code",[t._v("primitive")]),t._v(" of the "),s("code",[t._v("render_pipeline")]),t._v(" that we want the "),s("code",[t._v("front_face")]),t._v(" of our triangle to be "),s("code",[t._v("wgpu::FrontFace::Ccw")]),t._v(" so that we cull the back face. This means that any triangle that should be facing us should have its vertices in counter-clockwise order.")]),t._v(" "),s("p",[t._v("Now that we have our vertex data, we need to store it in a buffer. Let's add a "),s("code",[t._v("vertex_buffer")]),t._v(" field to "),s("code",[t._v("State")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now let's create the buffer in "),s("code",[t._v("new()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("To access the "),s("code",[t._v("create_buffer_init")]),t._v(" method on "),s("code",[t._v("wgpu::Device")]),t._v(", we'll have to import the "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/util/trait.DeviceExt.html#tymethod.create_buffer_init",target:"_blank",rel:"noopener noreferrer"}},[t._v("DeviceExt"),s("OutboundLink")],1),t._v(" extension trait. For more information on extension traits, check out "),s("a",{attrs:{href:"http://xion.io/post/code/rust-extension-traits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("To import the extension trait, put this line somewhere near the top of "),s("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("You'll note that we're using "),s("a",{attrs:{href:"https://docs.rs/bytemuck/latest/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck"),s("OutboundLink")],1),t._v(" to cast our "),s("code",[t._v("VERTICES")]),t._v(" as a "),s("code",[t._v("&[u8]")]),t._v(". The "),s("code",[t._v("create_buffer_init()")]),t._v(" method expects a "),s("code",[t._v("&[u8]")]),t._v(", and "),s("code",[t._v("bytemuck::cast_slice")]),t._v(" does that for us. Add the following to your "),s("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.12"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We're also going to need to implement two traits to get "),s("code",[t._v("bytemuck")]),t._v(" to work. These are "),s("a",{attrs:{href:"https://docs.rs/bytemuck/latest/bytemuck/trait.Pod.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Pod"),s("OutboundLink")],1),t._v(" and "),s("a",{attrs:{href:"https://docs.rs/bytemuck/latest/bytemuck/trait.Zeroable.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Zeroable"),s("OutboundLink")],1),t._v(". "),s("code",[t._v("Pod")]),t._v(" indicates that our "),s("code",[t._v("Vertex")]),t._v(' is "Plain Old Data", and thus can be interpreted as a '),s("code",[t._v("&[u8]")]),t._v(". "),s("code",[t._v("Zeroable")]),t._v(" indicates that we can use "),s("code",[t._v("std::mem::zeroed()")]),t._v(". We can modify our "),s("code",[t._v("Vertex")]),t._v(" struct to derive these methods.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("If your struct includes types that don't implement "),s("code",[t._v("Pod")]),t._v(" and "),s("code",[t._v("Zeroable")]),t._v(", you'll need to implement these traits manually. These traits don't require us to implement any methods, so we just need to use the following to get our code to work.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Zeroable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("Finally, we can add our "),s("code",[t._v("vertex_buffer")]),t._v(" to our "),s("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"so-what-do-i-do-with-it"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#so-what-do-i-do-with-it"}},[t._v("#")]),t._v(" So, what do I do with it?")]),t._v(" "),s("p",[t._v("We need to tell the "),s("code",[t._v("render_pipeline")]),t._v(" to use this buffer when we are drawing, but first, we need to tell the "),s("code",[t._v("render_pipeline")]),t._v(" how to read the buffer. We do this using "),s("code",[t._v("VertexBufferLayout")]),t._v("s and the "),s("code",[t._v("vertex_buffers")]),t._v(" field that I promised we'd talk about when we created the "),s("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),s("p",[t._v("A "),s("code",[t._v("VertexBufferLayout")]),t._v(" defines how a buffer is represented in memory. Without this, the render_pipeline has no idea how to map the buffer in the shader. Here's what the descriptor for a buffer full of "),s("code",[t._v("Vertex")]),t._v(" would look like.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 6.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",[s("li",[t._v("The "),s("code",[t._v("array_stride")]),t._v(" defines how wide a vertex is. When the shader goes to read the next vertex, it will skip over the "),s("code",[t._v("array_stride")]),t._v(" number of bytes. In our case, array_stride will probably be 24 bytes.")]),t._v(" "),s("li",[s("code",[t._v("step_mode")]),t._v(" tells the pipeline whether each element of the array in this buffer represents per-vertex data or per-instance data. We can specify "),s("code",[t._v("wgpu::VertexStepMode::Instance")]),t._v(" if we only want to change vertices when we start drawing a new instance. We'll cover instancing in a later tutorial.")]),t._v(" "),s("li",[t._v("Vertex attributes describe the individual parts of the vertex. Generally, this is a 1:1 mapping with a struct's fields, which is true in our case.")]),t._v(" "),s("li",[t._v("This defines the "),s("code",[t._v("offset")]),t._v(" in bytes until the attribute starts. For the first attribute, the offset is usually zero. For any later attributes, the offset is the sum over "),s("code",[t._v("size_of")]),t._v(" of the previous attributes' data.")]),t._v(" "),s("li",[t._v("This tells the shader what location to store this attribute at. For example, "),s("code",[t._v("@location(0) x: vec3")]),t._v(" in the vertex shader would correspond to the "),s("code",[t._v("position")]),t._v(" field of the "),s("code",[t._v("Vertex")]),t._v(" struct, while "),s("code",[t._v("@location(1) x: vec3")]),t._v(" would be the "),s("code",[t._v("color")]),t._v(" field.")]),t._v(" "),s("li",[s("code",[t._v("format")]),t._v(" tells the shader the shape of the attribute. "),s("code",[t._v("Float32x3")]),t._v(" corresponds to "),s("code",[t._v("vec3")]),t._v(" in shader code. The max value we can store in an attribute is "),s("code",[t._v("Float32x4")]),t._v(" ("),s("code",[t._v("Uint32x4")]),t._v(", and "),s("code",[t._v("Sint32x4")]),t._v(" work as well). We'll keep this in mind for when we have to store things that are bigger than "),s("code",[t._v("Float32x4")]),t._v(".")])]),t._v(" "),s("p",[t._v("For you visual learners, our vertex buffer looks like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(332),alt:"A figure of the VertexBufferLayout"}})]),t._v(" "),s("p",[t._v("Let's create a static method on "),s("code",[t._v("Vertex")]),t._v(" that returns this descriptor.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Specifying the attributes as we did now is quite verbose. We could use the "),s("code",[t._v("vertex_attr_array")]),t._v(" macro provided by wgpu to clean things up a bit. With it, our "),s("code",[t._v("VertexBufferLayout")]),t._v(" becomes")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("While this is definitely nice, Rust sees the result of "),s("code",[t._v("vertex_attr_array")]),t._v(" as a temporary value, so a tweak is required to return it from a function. We could "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/discussions/1790#discussioncomment-1160378",target:"_blank",rel:"noopener noreferrer"}},[t._v("make it "),s("code",[t._v("const")]),s("OutboundLink")],1),t._v(", as in the example below:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Regardless, I feel it's good to show how the data gets mapped, so I'll forgo using this macro for now.")])]),t._v(" "),s("p",[t._v("Now, we can use it when we create the "),s("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("One more thing: we need to actually set the vertex buffer in the render method. Otherwise, our program will crash.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("code",[t._v("set_vertex_buffer")]),t._v(" takes two parameters. The first is what buffer slot to use for this vertex buffer. You can have multiple vertex buffers set at a time.")]),t._v(" "),s("p",[t._v("The second parameter is the slice of the buffer to use. You can store as many objects in a buffer as your hardware allows, so "),s("code",[t._v("slice")]),t._v(" allows us to specify which portion of the buffer to use. We use "),s("code",[t._v("..")]),t._v(" to specify the entire buffer.")]),t._v(" "),s("p",[t._v("Before we continue, we should change the "),s("code",[t._v("render_pass.draw()")]),t._v(" call to use the number of vertices specified by "),s("code",[t._v("VERTICES")]),t._v(". Add a "),s("code",[t._v("num_vertices")]),t._v(" to "),s("code",[t._v("State")]),t._v(", and set it to be equal to "),s("code",[t._v("VERTICES.len()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Then, use it in the draw call.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Before our changes will have any effect, we need to update our vertex shader to get its data from the vertex buffer. We'll also have it include the vertex color as well.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("If you've done things correctly, you should see a triangle that looks something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(333),alt:"A colorful triangle"}})]),t._v(" "),s("h2",{attrs:{id:"the-index-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-index-buffer"}},[t._v("#")]),t._v(" The index buffer")]),t._v(" "),s("p",[t._v("We technically don't "),s("em",[t._v("need")]),t._v(" an index buffer, but they still are plenty useful. An index buffer comes into play when we start using models with a lot of triangles. Consider this pentagon.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(334),alt:"A pentagon made of 3 triangles"}})]),t._v(" "),s("p",[t._v("It has a total of 5 vertices and 3 triangles. Now, if we wanted to display something like this using just vertices, we would need something like the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("You'll note, though, that some of the vertices are used more than once. C and B are used twice, and E is repeated three times. Assuming that each float is 4 bytes, then that means of the 216 bytes we use for "),s("code",[t._v("VERTICES")]),t._v(", 96 of them are duplicate data. Wouldn't it be nice if we could list these vertices once? Well, we can! That's where an index buffer comes into play.")]),t._v(" "),s("p",[t._v("Basically, we store all the unique vertices in "),s("code",[t._v("VERTICES")]),t._v(", and we create another buffer that stores indices to elements in "),s("code",[t._v("VERTICES")]),t._v(" to create the triangles. Here's an example of that with our pentagon.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now, with this setup, our "),s("code",[t._v("VERTICES")]),t._v(" take up about 120 bytes and "),s("code",[t._v("INDICES")]),t._v(" is just 18 bytes, given that "),s("code",[t._v("u16")]),t._v(" is 2 bytes wide. In this case, wgpu automatically adds 2 extra bytes of padding to make sure the buffer is aligned to 4 bytes, but it's still just 20 bytes. Altogether, our pentagon is 140 bytes in total. That means we saved 76 bytes! It may not seem like much, but when dealing with tri counts in the hundreds of thousands, indexing saves a lot of memory.")]),t._v(" "),s("p",[t._v("There are a couple of things we need to change in order to use indexing. The first is we need to create a buffer to store the indices. In "),s("code",[t._v("State")]),t._v("'s "),s("code",[t._v("new()")]),t._v(" method, create the "),s("code",[t._v("index_buffer")]),t._v(" after you create the "),s("code",[t._v("vertex_buffer")]),t._v(". Also, change "),s("code",[t._v("num_vertices")]),t._v(" to "),s("code",[t._v("num_indices")]),t._v(" and set it equal to "),s("code",[t._v("INDICES.len()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_indices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We don't need to implement "),s("code",[t._v("Pod")]),t._v(" and "),s("code",[t._v("Zeroable")]),t._v(" for our indices because "),s("code",[t._v("bytemuck")]),t._v(" has already implemented them for basic types such as "),s("code",[t._v("u16")]),t._v(". That means we can just add "),s("code",[t._v("index_buffer")]),t._v(" and "),s("code",[t._v("num_indices")]),t._v(" to the "),s("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("And then populate these fields in the constructor:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("All we have to do now is update the "),s("code",[t._v("render()")]),t._v(" method to use the "),s("code",[t._v("index_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n")])])]),s("p",[t._v("A couple of things to note:")]),t._v(" "),s("ol",[s("li",[t._v("The method name is "),s("code",[t._v("set_index_buffer")]),t._v(", not "),s("code",[t._v("set_index_buffers")]),t._v(". You can only have one index buffer set at a time.")]),t._v(" "),s("li",[t._v("When using an index buffer, you need to use "),s("code",[t._v("draw_indexed")]),t._v(". The "),s("code",[t._v("draw")]),t._v(" method ignores the index buffer. Also, make sure you use the number of indices ("),s("code",[t._v("num_indices")]),t._v("), not vertices, as your model will either draw wrong or the method will "),s("code",[t._v("panic")]),t._v(" because there are not enough indices.")])]),t._v(" "),s("p",[t._v("With all that you should have a garishly magenta pentagon in your window.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(335),alt:"Magenta pentagon in window"}})]),t._v(" "),s("h2",{attrs:{id:"color-correction"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#color-correction"}},[t._v("#")]),t._v(" Color Correction")]),t._v(" "),s("p",[t._v("If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values, you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range, we get roughly (0.737254902, 0, 0.737254902). This is not the same as what we are using for our vertex colors, which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.")]),t._v(" "),s("p",[t._v("Most monitors use a color space known as sRGB. Our surface is (most likely depending on what is returned from "),s("code",[t._v("surface.get_preferred_format()")]),t._v(") using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than in lighter colors.")]),t._v(" "),s("p",[t._v("You get the correct color using the following formula: "),s("code",[t._v("srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4")]),t._v(". Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing a manual color conversion, you'll likely save a lot of time by using textures instead, as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.")]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial4_buffer"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/31.bcaf5c7c.js b/assets/js/31.550259b2.js similarity index 99% rename from assets/js/31.bcaf5c7c.js rename to assets/js/31.550259b2.js index d98e1f86..6d4267df 100644 --- a/assets/js/31.bcaf5c7c.js +++ b/assets/js/31.550259b2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{377:function(t,a,s){t.exports=s.p+"assets/img/figure_no-fbm.1931fe05.png"},378:function(t,a,s){t.exports=s.p+"assets/img/figure_fbm.28310498.png"},379:function(t,a,s){t.exports=s.p+"assets/img/figure_spiky.46babb7a.png"},380:function(t,a,s){t.exports=s.p+"assets/img/figure_work-groups.af52f221.jpg"},447:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"procedural-terrain"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#procedural-terrain"}},[t._v("#")]),t._v(" Procedural Terrain")]),t._v(" "),a("p",[t._v("Up to this point, we've been working in an empty void. This is great when you want to get your shading code just right, but most applications will want to fill the screen with more interesting things. You could approach this in a variety of ways. You could create a bunch of models in Blender and load them into the scene. This method works great if you have some decent artistic skills and some patience. I'm lacking in both those departments, so let's write some code to make something that looks nice.")]),t._v(" "),a("p",[t._v("As the name of this article suggests, we're going to create a terrain. Now, the traditional method to create a terrain mesh is to use a pre-generated noise texture and sample it to get the height values at each point in the mesh. This is a valid approach, but I opted to generate the noise using a compute shader directly. Let's get started!")]),t._v(" "),a("h2",{attrs:{id:"compute-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compute-shaders"}},[t._v("#")]),t._v(" Compute Shaders")]),t._v(" "),a("p",[t._v("A compute shader is simply a shader that allows you to leverage the GPU's parallel computing power for arbitrary tasks. You can use them for anything from creating a texture to running a neural network. I'll get more into how they work in a bit, but for now, suffice to say that we're going to use them to create the vertex and index buffers for our terrain.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("As of writing, compute shaders are still experimental on the web. You can enable them on beta versions of browsers such as Chrome Canary and Firefox Nightly. Because of this, I'll cover a method to use a fragment shader to compute the vertex and index buffers after we cover the compute shader method.")])]),t._v(" "),a("h2",{attrs:{id:"noise-functions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#noise-functions"}},[t._v("#")]),t._v(" Noise Functions")]),t._v(" "),a("p",[t._v("Let's start with the shader code for the compute shader. First, we'll create the noise functions. Then, we'll create the compute shader's entry function. Create a new file called "),a("code",[t._v("terrain.wgsl")]),t._v(". Then add the following:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ============================")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Terrain Generation")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ============================")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://gist.github.com/munrocket/236ed5ba7e409b8bdf1ff6eca5dcdc39")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MIT License. © Ian McEwan, Stefan Gustavson, Munrocket")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - Less condensed glsl implementation with comments can be found at https://weber.itn.liu.se/~stegu/jgt2012/article.pdf")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("permute3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("34.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("289.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("snoise2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.211324865405187")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.366025403784439")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.577350269189626")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.024390243902439")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("floor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I flipped the condition here from > to < as it fixed some artifacting I was observing")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("select")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" x12"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("xyxy "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xxzz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("289.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("permute3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("permute3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" x0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("xy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("xy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("zw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("zw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("fract")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("www"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" h "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("abs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ox "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("floor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" ox"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.79284291400159")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.85373472095314")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" a0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" h "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" h"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" g "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" h"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("yz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("xz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" h"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("yw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("130.")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" g"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),a("p",[t._v("Some of my readers may recognize this as an implementation of Simplex noise (specifically OpenSimplex noise). I'll admit to not really understanding the math behind OpenSimplex noise. The basics are that it's similar to Perlin Noise, but instead of a square grid, it's a hexagonal grid that removes some of the artifacts that generating the noise on a square grid gets you. Again, I'm not an expert on this, so to summarize: "),a("code",[t._v("permute3()")]),t._v(" takes a "),a("code",[t._v("vec3")]),t._v(" and returns a pseudorandom "),a("code",[t._v("vec3")]),t._v(", "),a("code",[t._v("snoise2()")]),t._v(" takes a "),a("code",[t._v("vec2")]),t._v(" and returns a floating point number between [-1, 1]. If you want to learn more about noise functions, check out "),a("a",{attrs:{href:"https://thebookofshaders.com/11/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article from The Book of Shaders"),a("OutboundLink")],1),t._v(". The code's in GLSL, but the concepts are the same.")]),t._v(" "),a("p",[t._v("While we can use the output of "),a("code",[t._v("snoise")]),t._v(" directly to generate the terrain's height values, the result of this tends to be very smooth, which may be what you want, but it doesn't look very organic, as you can see below:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(377),alt:"smooth terrain"}})]),t._v(" "),a("p",[t._v("To make the terrain a bit rougher, we're going to use a technique called "),a("a",{attrs:{href:"https://thebookofshaders.com/13/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Fractal Brownian Motion"),a("OutboundLink")],1),t._v(". This technique works by sampling the noise function multiple times, cutting the strength in half each time while doubling the frequency of the noise. This means that the overall shape of the terrain will be fairly smooth, but it will have sharper details. You can see what that will look like below:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(378),alt:"more organic terrain"}})]),t._v(" "),a("p",[t._v("The code for this function is actually quite simple:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fbm")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" NUM_OCTAVES"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("5u")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.01")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shift "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("100.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" cs "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cos")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rot "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat2x2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0u")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("NUM_OCTAVES"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1u")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("snoise2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rot "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" shift"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Let's go over this for a bit:")]),t._v(" "),a("ul",[a("li",[t._v("The "),a("code",[t._v("NUM_OCTAVES")]),t._v(" constant is the number of levels of noise you want. More octaves will add more texture to the terrain mesh, but you'll get diminishing returns at higher levels. I find that 5 is a good number.")]),t._v(" "),a("li",[t._v("We multiply "),a("code",[t._v("p")]),t._v(" by "),a("code",[t._v("0.01")]),t._v(' to "zoom in" on the noise function. This is because our mesh will be 1x1 quads, and the simplex noise function resembles white noise when stepping by one each time. You can see what it looks like to use '),a("code",[t._v("p")]),t._v(" directly: "),a("img",{attrs:{src:s(379),alt:"spiky terrain"}})]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("a")]),t._v(" variable is the amplitude of the noise at the given noise level.")]),t._v(" "),a("li",[a("code",[t._v("shift")]),t._v(" and "),a("code",[t._v("rot")]),t._v(" are used to reduce artifacts in the generated noise. One such artifact is that at "),a("code",[t._v("0,0")]),t._v(", the output of the "),a("code",[t._v("snoise")]),t._v(" will always be the same regardless of how much you scale "),a("code",[t._v("p")]),t._v(".")])]),t._v(" "),a("h2",{attrs:{id:"generating-the-mesh"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#generating-the-mesh"}},[t._v("#")]),t._v(" Generating the mesh")]),t._v(" "),a("p",[t._v("To generate the terrain mesh, we're going to need to pass some information into the shader:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChunkData")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chunk_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n chunk_corner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_max_height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBuffer")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// stride: 32")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexBuffer")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" chunk_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChunkData")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("storage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" read_write"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" vertices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("storage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" read_write"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" indices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Our shader will expect a "),a("code",[t._v("uniform")]),t._v(" buffer that includes the size of the quad grid in "),a("code",[t._v("chunk_size")]),t._v(", the "),a("code",[t._v("chunk_corner")]),t._v(" that our noise algorithm should start at, and the "),a("code",[t._v("min_max_height")]),t._v(" of the terrain.")]),t._v(" "),a("p",[t._v("The vertex and index buffers are passed in as "),a("code",[t._v("storage")]),t._v(" buffers with "),a("code",[t._v("read_write")]),t._v(" enabled. We'll create the actual buffers in Rust and bind them when we execute the compute shader.")]),t._v(" "),a("p",[t._v("The next part of the shader will be the functions that generate a point on the mesh and a vertex at that point:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mix")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("chunk_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("min_max_height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("chunk_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("min_max_height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("fbm")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("terrain_vertex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tpx "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tpz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tnx "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tnz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cross")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tpz"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" nn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cross")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tnz"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tnx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" nn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("Vertex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("The "),a("code",[t._v("terrain_point")]),t._v(" function takes an XZ point on the terrain and returns a "),a("code",[t._v("vec3")]),t._v(" with the "),a("code",[t._v("y")]),t._v(" value between the min and max height values.")]),t._v(" "),a("p",[a("code",[t._v("terrain_vertex")]),t._v(" uses "),a("code",[t._v("terrain_point")]),t._v(" to get its position and also to compute the normal of the surface by sampling four nearby points and uses them to compute the normal using "),a("a",{attrs:{href:"https://www.khanacademy.org/math/multivariable-calculus/thinking-about-multivariable-function/x786f2022:vectors-and-matrices/a/cross-products-mvc",target:"_blank",rel:"noopener noreferrer"}},[t._v("cross products"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("You'll notice that our "),a("code",[t._v("Vertex")]),t._v(" struct doesn't include a texture coordinate. We could easily create texture coordinates by using the XZ coords of the vertices and having the texture sampler mirror the texture on the x and y axes, but heightmaps tend to have stretching when textured in this way.")]),t._v(" "),a("p",[t._v("We'll cover a method called triplanar mapping to texture the terrain in a future tutorial. For now, we'll just use a procedural texture that will be created in the fragment shader we use to render the terrain.")])]),t._v(" "),a("p",[t._v("Now that we can get a vertex on the terrain surface, we can fill our vertex and index buffers with actual data. We'll create a "),a("code",[t._v("gen_terrain()")]),t._v(" function that will be the entry point for our compute shader:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("compute")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("workgroup_size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("64")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("gen_terrain")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("global_invocation_id")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" gid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// snipped...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("We specify that "),a("code",[t._v("gen_terrain")]),t._v(" is a compute shader entry point by annotating it with "),a("code",[t._v("stage(compute)")]),t._v(".")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("workgroup_size()")]),t._v(" is the number of workers the GPU can allocate per "),a("code",[t._v("workgroup")]),t._v(". We specify the number of workers when we execute the compute shader. There are technically three parameters to this as work groups are a 3d grid, but if you don't specify them, they default to 1. In other words "),a("code",[t._v("workgroup_size(64)")]),t._v(" is equivalent to "),a("code",[t._v("workgroup_size(64, 1, 1)")]),t._v(".")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("global_invocation_id")]),t._v(" is a 3d index. This may seem weird, but you can think of work groups as a 3d grid of work groups. These workgroups have an internal grid of workers. The "),a("code",[t._v("global_invocation_id")]),t._v(" is the id of the current worker relative to all the other works.")]),t._v(" "),a("p",[t._v("Visually, the workgroup grid would look something like this:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(380),alt:"work group grid"}})]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("It may be helpful to think of a compute shader as a function that is run in a bunch of nested for loops, but each loop is executed in parallel. It would look something like this:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("for wgx in num_workgroups.x:\n for wgy in num_workgroups.y:\n for wgz in num_workgroups.z:\n var local_invocation_id = (wgx, wgy, wgz)\n for x in workgroup_size.x:\n for y in workgroup_size.x:\n for z in workgroup_size.x:\n var global_invocation_id = local_invocation_id * workgroup_size + (x, y, z);\n gen_terrain(global_invocation_id)\n\n")])])]),a("p",[t._v("If you want to learn more about workgroups, "),a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#compute-shader-workgroups",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),a("OutboundLink")],1),t._v(".")])]),t._v(" "),a("p",[t._v("TODO:")]),t._v(" "),a("ul",[a("li",[t._v("Note changes to "),a("code",[t._v("create_render_pipeline")])]),t._v(" "),a("li",[t._v("Mention "),a("code",[t._v("swizzle")]),t._v(" feature for cgmath")]),t._v(" "),a("li",[t._v("Compare workgroups and workgroups sizes to nested for-loops\n"),a("ul",[a("li",[t._v("Maybe make a diagram in Blender?")])])]),t._v(" "),a("li",[t._v("Change to camera movement speed")])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{377:function(t,a,s){t.exports=s.p+"assets/img/figure_no-fbm.1931fe05.png"},378:function(t,a,s){t.exports=s.p+"assets/img/figure_fbm.28310498.png"},379:function(t,a,s){t.exports=s.p+"assets/img/figure_spiky.46babb7a.png"},380:function(t,a,s){t.exports=s.p+"assets/img/figure_work-groups.af52f221.jpg"},446:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"procedural-terrain"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#procedural-terrain"}},[t._v("#")]),t._v(" Procedural Terrain")]),t._v(" "),a("p",[t._v("Up to this point, we've been working in an empty void. This is great when you want to get your shading code just right, but most applications will want to fill the screen with more interesting things. You could approach this in a variety of ways. You could create a bunch of models in Blender and load them into the scene. This method works great if you have some decent artistic skills and some patience. I'm lacking in both those departments, so let's write some code to make something that looks nice.")]),t._v(" "),a("p",[t._v("As the name of this article suggests, we're going to create a terrain. Now, the traditional method to create a terrain mesh is to use a pre-generated noise texture and sample it to get the height values at each point in the mesh. This is a valid approach, but I opted to generate the noise using a compute shader directly. Let's get started!")]),t._v(" "),a("h2",{attrs:{id:"compute-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compute-shaders"}},[t._v("#")]),t._v(" Compute Shaders")]),t._v(" "),a("p",[t._v("A compute shader is simply a shader that allows you to leverage the GPU's parallel computing power for arbitrary tasks. You can use them for anything from creating a texture to running a neural network. I'll get more into how they work in a bit, but for now, suffice to say that we're going to use them to create the vertex and index buffers for our terrain.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("As of writing, compute shaders are still experimental on the web. You can enable them on beta versions of browsers such as Chrome Canary and Firefox Nightly. Because of this, I'll cover a method to use a fragment shader to compute the vertex and index buffers after we cover the compute shader method.")])]),t._v(" "),a("h2",{attrs:{id:"noise-functions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#noise-functions"}},[t._v("#")]),t._v(" Noise Functions")]),t._v(" "),a("p",[t._v("Let's start with the shader code for the compute shader. First, we'll create the noise functions. Then, we'll create the compute shader's entry function. Create a new file called "),a("code",[t._v("terrain.wgsl")]),t._v(". Then add the following:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ============================")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Terrain Generation")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ============================")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://gist.github.com/munrocket/236ed5ba7e409b8bdf1ff6eca5dcdc39")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MIT License. © Ian McEwan, Stefan Gustavson, Munrocket")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - Less condensed glsl implementation with comments can be found at https://weber.itn.liu.se/~stegu/jgt2012/article.pdf")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("permute3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("34.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("289.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("snoise2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.211324865405187")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.366025403784439")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.577350269189626")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.024390243902439")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("floor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I flipped the condition here from > to < as it fixed some artifacting I was observing")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("select")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" x12"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("xyxy "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xxzz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("289.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("permute3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("permute3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("max")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" x0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("xy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("xy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("zw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("zw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("fract")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("C")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("www"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" h "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("abs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ox "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("floor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" ox"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.79284291400159")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.85373472095314")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" a0 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" h "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" h"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" g "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" h"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.")]),t._v("yz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("xz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" h"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x"),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("12.")]),t._v("yw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("130.")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("dot")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" g"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),a("p",[t._v("Some of my readers may recognize this as an implementation of Simplex noise (specifically OpenSimplex noise). I'll admit to not really understanding the math behind OpenSimplex noise. The basics are that it's similar to Perlin Noise, but instead of a square grid, it's a hexagonal grid that removes some of the artifacts that generating the noise on a square grid gets you. Again, I'm not an expert on this, so to summarize: "),a("code",[t._v("permute3()")]),t._v(" takes a "),a("code",[t._v("vec3")]),t._v(" and returns a pseudorandom "),a("code",[t._v("vec3")]),t._v(", "),a("code",[t._v("snoise2()")]),t._v(" takes a "),a("code",[t._v("vec2")]),t._v(" and returns a floating point number between [-1, 1]. If you want to learn more about noise functions, check out "),a("a",{attrs:{href:"https://thebookofshaders.com/11/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article from The Book of Shaders"),a("OutboundLink")],1),t._v(". The code's in GLSL, but the concepts are the same.")]),t._v(" "),a("p",[t._v("While we can use the output of "),a("code",[t._v("snoise")]),t._v(" directly to generate the terrain's height values, the result of this tends to be very smooth, which may be what you want, but it doesn't look very organic, as you can see below:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(377),alt:"smooth terrain"}})]),t._v(" "),a("p",[t._v("To make the terrain a bit rougher, we're going to use a technique called "),a("a",{attrs:{href:"https://thebookofshaders.com/13/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Fractal Brownian Motion"),a("OutboundLink")],1),t._v(". This technique works by sampling the noise function multiple times, cutting the strength in half each time while doubling the frequency of the noise. This means that the overall shape of the terrain will be fairly smooth, but it will have sharper details. You can see what that will look like below:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(378),alt:"more organic terrain"}})]),t._v(" "),a("p",[t._v("The code for this function is actually quite simple:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fbm")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" NUM_OCTAVES"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("5u")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.01")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shift "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("100.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" cs "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cos")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("sin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rot "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat2x2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0u")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("NUM_OCTAVES"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1u")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("snoise2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rot "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" x "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("2.0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" shift"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Let's go over this for a bit:")]),t._v(" "),a("ul",[a("li",[t._v("The "),a("code",[t._v("NUM_OCTAVES")]),t._v(" constant is the number of levels of noise you want. More octaves will add more texture to the terrain mesh, but you'll get diminishing returns at higher levels. I find that 5 is a good number.")]),t._v(" "),a("li",[t._v("We multiply "),a("code",[t._v("p")]),t._v(" by "),a("code",[t._v("0.01")]),t._v(' to "zoom in" on the noise function. This is because our mesh will be 1x1 quads, and the simplex noise function resembles white noise when stepping by one each time. You can see what it looks like to use '),a("code",[t._v("p")]),t._v(" directly: "),a("img",{attrs:{src:s(379),alt:"spiky terrain"}})]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("a")]),t._v(" variable is the amplitude of the noise at the given noise level.")]),t._v(" "),a("li",[a("code",[t._v("shift")]),t._v(" and "),a("code",[t._v("rot")]),t._v(" are used to reduce artifacts in the generated noise. One such artifact is that at "),a("code",[t._v("0,0")]),t._v(", the output of the "),a("code",[t._v("snoise")]),t._v(" will always be the same regardless of how much you scale "),a("code",[t._v("p")]),t._v(".")])]),t._v(" "),a("h2",{attrs:{id:"generating-the-mesh"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#generating-the-mesh"}},[t._v("#")]),t._v(" Generating the mesh")]),t._v(" "),a("p",[t._v("To generate the terrain mesh, we're going to need to pass some information into the shader:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChunkData")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chunk_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n chunk_corner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_max_height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" normal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBuffer")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// stride: 32")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexBuffer")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" chunk_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChunkData")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("storage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" read_write"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" vertices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("storage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" read_write"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" indices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Our shader will expect a "),a("code",[t._v("uniform")]),t._v(" buffer that includes the size of the quad grid in "),a("code",[t._v("chunk_size")]),t._v(", the "),a("code",[t._v("chunk_corner")]),t._v(" that our noise algorithm should start at, and the "),a("code",[t._v("min_max_height")]),t._v(" of the terrain.")]),t._v(" "),a("p",[t._v("The vertex and index buffers are passed in as "),a("code",[t._v("storage")]),t._v(" buffers with "),a("code",[t._v("read_write")]),t._v(" enabled. We'll create the actual buffers in Rust and bind them when we execute the compute shader.")]),t._v(" "),a("p",[t._v("The next part of the shader will be the functions that generate a point on the mesh and a vertex at that point:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mix")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("chunk_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("min_max_height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("chunk_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("min_max_height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("fbm")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("terrain_vertex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tpx "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tpz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tnx "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tnz "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("terrain_point")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("p "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cross")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tpz"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" nn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("normalize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cross")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tnz"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tnx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" nn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("Vertex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("The "),a("code",[t._v("terrain_point")]),t._v(" function takes an XZ point on the terrain and returns a "),a("code",[t._v("vec3")]),t._v(" with the "),a("code",[t._v("y")]),t._v(" value between the min and max height values.")]),t._v(" "),a("p",[a("code",[t._v("terrain_vertex")]),t._v(" uses "),a("code",[t._v("terrain_point")]),t._v(" to get its position and also to compute the normal of the surface by sampling four nearby points and uses them to compute the normal using "),a("a",{attrs:{href:"https://www.khanacademy.org/math/multivariable-calculus/thinking-about-multivariable-function/x786f2022:vectors-and-matrices/a/cross-products-mvc",target:"_blank",rel:"noopener noreferrer"}},[t._v("cross products"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("You'll notice that our "),a("code",[t._v("Vertex")]),t._v(" struct doesn't include a texture coordinate. We could easily create texture coordinates by using the XZ coords of the vertices and having the texture sampler mirror the texture on the x and y axes, but heightmaps tend to have stretching when textured in this way.")]),t._v(" "),a("p",[t._v("We'll cover a method called triplanar mapping to texture the terrain in a future tutorial. For now, we'll just use a procedural texture that will be created in the fragment shader we use to render the terrain.")])]),t._v(" "),a("p",[t._v("Now that we can get a vertex on the terrain surface, we can fill our vertex and index buffers with actual data. We'll create a "),a("code",[t._v("gen_terrain()")]),t._v(" function that will be the entry point for our compute shader:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("compute")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("workgroup_size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("64")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("gen_terrain")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("global_invocation_id")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" gid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// snipped...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("We specify that "),a("code",[t._v("gen_terrain")]),t._v(" is a compute shader entry point by annotating it with "),a("code",[t._v("stage(compute)")]),t._v(".")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("workgroup_size()")]),t._v(" is the number of workers the GPU can allocate per "),a("code",[t._v("workgroup")]),t._v(". We specify the number of workers when we execute the compute shader. There are technically three parameters to this as work groups are a 3d grid, but if you don't specify them, they default to 1. In other words "),a("code",[t._v("workgroup_size(64)")]),t._v(" is equivalent to "),a("code",[t._v("workgroup_size(64, 1, 1)")]),t._v(".")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("global_invocation_id")]),t._v(" is a 3d index. This may seem weird, but you can think of work groups as a 3d grid of work groups. These workgroups have an internal grid of workers. The "),a("code",[t._v("global_invocation_id")]),t._v(" is the id of the current worker relative to all the other works.")]),t._v(" "),a("p",[t._v("Visually, the workgroup grid would look something like this:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(380),alt:"work group grid"}})]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("It may be helpful to think of a compute shader as a function that is run in a bunch of nested for loops, but each loop is executed in parallel. It would look something like this:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("for wgx in num_workgroups.x:\n for wgy in num_workgroups.y:\n for wgz in num_workgroups.z:\n var local_invocation_id = (wgx, wgy, wgz)\n for x in workgroup_size.x:\n for y in workgroup_size.x:\n for z in workgroup_size.x:\n var global_invocation_id = local_invocation_id * workgroup_size + (x, y, z);\n gen_terrain(global_invocation_id)\n\n")])])]),a("p",[t._v("If you want to learn more about workgroups, "),a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#compute-shader-workgroups",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),a("OutboundLink")],1),t._v(".")])]),t._v(" "),a("p",[t._v("TODO:")]),t._v(" "),a("ul",[a("li",[t._v("Note changes to "),a("code",[t._v("create_render_pipeline")])]),t._v(" "),a("li",[t._v("Mention "),a("code",[t._v("swizzle")]),t._v(" feature for cgmath")]),t._v(" "),a("li",[t._v("Compare workgroups and workgroups sizes to nested for-loops\n"),a("ul",[a("li",[t._v("Maybe make a diagram in Blender?")])])]),t._v(" "),a("li",[t._v("Change to camera movement speed")])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/32.3d0e544d.js b/assets/js/32.e6627282.js similarity index 98% rename from assets/js/32.3d0e544d.js rename to assets/js/32.e6627282.js index 429218d5..1c5b90a8 100644 --- a/assets/js/32.3d0e544d.js +++ b/assets/js/32.e6627282.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{382:function(t,s,a){t.exports=a.p+"assets/img/corruption.675b1eca.png"},383:function(t,s,a){t.exports=a.p+"assets/img/black_triangles.df338b97.png"},384:function(t,s,a){t.exports=a.p+"assets/img/render_doc_output.e0c8b298.png"},385:function(t,s,a){t.exports=a.p+"assets/img/results.7918efc1.png"},457:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"compute-example-tangents-and-bitangents"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#compute-example-tangents-and-bitangents"}},[t._v("#")]),t._v(" Compute Example: Tangents and Bitangents")]),t._v(" "),s("p",[t._v("This proved more difficult than I anticipated. The first problem I encountered was some vertex data corruption due to the shader reading my vertex data incorrectly. I was using the "),s("code",[t._v("ModelVertex")]),t._v(" struct I used in the "),s("RouterLink",{attrs:{to:"/intermediate/tutorial11-normals/"}},[t._v("normal mapping tutorial")]),t._v(".")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This structure works perfectly fine when used as a vertex buffer. Using it as a storage buffer proved less convenient. My previous code used a GLSL struct similar to my "),s("code",[t._v("ModelVertex")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("At first glance, this seems just fine, but OpenGL experts would likely see a problem with the structure. Our fields aren't aligned properly to support the "),s("code",[t._v("std430")]),t._v(" alignment that storage buffers require. I won't get into detail but you can check out the "),s("a",{attrs:{href:"../alignment"}},[t._v("alignment showcase")]),t._v(" if you want to know more. To summarize, the "),s("code",[t._v("vec2")]),t._v(" for the "),s("code",[t._v("tex_coords")]),t._v(" was messing up the byte alignment, corrupting the vertex data resulting in the following:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(382),alt:"./corruption.png"}})]),t._v(" "),s("p",[t._v("I could have fixed this by adding a padding field after "),s("code",[t._v("tex_coords")]),t._v(" on the Rust side, but that would require modifying the "),s("code",[t._v("VertexBufferLayout")]),t._v(". I ended up solving this problem by using the components of the vectors directly which resulted in a struct like this:")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ny"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Since "),s("code",[t._v("std430")]),t._v(" will use the alignment of the largest element of the struct, using all floats means the struct will be aligned to 4 bytes. This is alignment matches what "),s("code",[t._v("ModelVertex")]),t._v(" uses in Rust. This was kind of a pain to work with, but it fixed the corruption issue.")]),t._v(" "),s("p",[t._v("The second problem required me to rethink how I was computing the tangent and bitangent. The previous algorithm I was using only computed the tangent and bitangent for each triangle and set all the vertices in that triangle to use the same tangent and bitangent. While this is fine in a single-threaded context, the code breaks down when trying to compute the triangles in parallel. The reason is that multiple triangles can share the same vertices. This means that when we go to save the resulting tangents, we inevitably end up trying to write to the same vertex from multiple different threads which is a big no no. You can see the issue with this method below:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(383),alt:"./black_triangles.png"}})]),t._v(" "),s("p",[t._v("Those black triangles were the result of multiple GPU threads trying to modify the same vertices. Looking at the data in Render Doc I could see that the tangents and bitangents were garbage numbers such as "),s("code",[t._v("NaN")]),t._v(".")]),t._v(" "),s("p",[s("img",{attrs:{src:a(384),alt:"./render_doc_output.png"}})]),t._v(" "),s("p",[t._v("While on the CPU we could introduce a synchronization primitive such as a "),s("code",[t._v("Mutex")]),t._v(" to fix this issue, AFAIK there isn't really such a thing on the GPU. Instead, I decided to swap my code to work with each vertex individually. There are some hurdles with that, but those will be easier to explain in code. Let's start with the "),s("code",[t._v("main")]),t._v(" function.")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" gl_GlobalInvocationID"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n dstVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We use the "),s("code",[t._v("gl_GlobalInvocationID.x")]),t._v(" to get the index of the vertex we want to compute the tangents for. I opted to put the actual calculation into its own method. Let's take a look at that.")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[t._v("ModelVertex "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" trianglesIncluded "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Find the triangles that use v")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// * Loop over every triangle (i + 3)")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" numIndices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Only perform the calculation if one of the indices")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// matches our vertexIndex")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" r "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n trianglesIncluded "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangent and bitangents")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("trianglesIncluded "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Save the results")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ty "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("by "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"possible-improvements"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#possible-improvements"}},[t._v("#")]),t._v(" Possible Improvements")]),t._v(" "),s("p",[t._v("Looping over every triangle for every vertex is likely raising some red flags for some of you. In a single-threaded context, this algorithm would end up being O(N*M). As we are utilizing the high number of threads available to our GPU, this is less of an issue, but it still means our GPU is burning more cycles than it needs to.")]),t._v(" "),s("p",[t._v("One way I came up with to possibly improve performance is to store the index of each triangle in a hash map like structure with the vertex index as keys. Here's some pseudo code:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'd then need to flatten this structure to pass it to the GPU. We'd also need a second array to index the first.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t_list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleMapIndex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n start"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n len"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" t_list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n flat_triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("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 than the simple method.")]),t._v(" "),s("h2",{attrs:{id:"results"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#results"}},[t._v("#")]),t._v(" Results")]),t._v(" "),s("p",[t._v("The tangents and bitangents are now getting calculated correctly and on the GPU!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(385),alt:"./results.png"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{383:function(t,s,a){t.exports=a.p+"assets/img/corruption.675b1eca.png"},384:function(t,s,a){t.exports=a.p+"assets/img/black_triangles.df338b97.png"},385:function(t,s,a){t.exports=a.p+"assets/img/render_doc_output.e0c8b298.png"},386:function(t,s,a){t.exports=a.p+"assets/img/results.7918efc1.png"},458:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"compute-example-tangents-and-bitangents"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#compute-example-tangents-and-bitangents"}},[t._v("#")]),t._v(" Compute Example: Tangents and Bitangents")]),t._v(" "),s("p",[t._v("This proved more difficult than I anticipated. The first problem I encountered was some vertex data corruption due to the shader reading my vertex data incorrectly. I was using the "),s("code",[t._v("ModelVertex")]),t._v(" struct I used in the "),s("RouterLink",{attrs:{to:"/intermediate/tutorial11-normals/"}},[t._v("normal mapping tutorial")]),t._v(".")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This structure works perfectly fine when used as a vertex buffer. Using it as a storage buffer proved less convenient. My previous code used a GLSL struct similar to my "),s("code",[t._v("ModelVertex")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("At first glance, this seems just fine, but OpenGL experts would likely see a problem with the structure. Our fields aren't aligned properly to support the "),s("code",[t._v("std430")]),t._v(" alignment that storage buffers require. I won't get into detail but you can check out the "),s("a",{attrs:{href:"../alignment"}},[t._v("alignment showcase")]),t._v(" if you want to know more. To summarize, the "),s("code",[t._v("vec2")]),t._v(" for the "),s("code",[t._v("tex_coords")]),t._v(" was messing up the byte alignment, corrupting the vertex data resulting in the following:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(383),alt:"./corruption.png"}})]),t._v(" "),s("p",[t._v("I could have fixed this by adding a padding field after "),s("code",[t._v("tex_coords")]),t._v(" on the Rust side, but that would require modifying the "),s("code",[t._v("VertexBufferLayout")]),t._v(". I ended up solving this problem by using the components of the vectors directly which resulted in a struct like this:")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ny"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Since "),s("code",[t._v("std430")]),t._v(" will use the alignment of the largest element of the struct, using all floats means the struct will be aligned to 4 bytes. This is alignment matches what "),s("code",[t._v("ModelVertex")]),t._v(" uses in Rust. This was kind of a pain to work with, but it fixed the corruption issue.")]),t._v(" "),s("p",[t._v("The second problem required me to rethink how I was computing the tangent and bitangent. The previous algorithm I was using only computed the tangent and bitangent for each triangle and set all the vertices in that triangle to use the same tangent and bitangent. While this is fine in a single-threaded context, the code breaks down when trying to compute the triangles in parallel. The reason is that multiple triangles can share the same vertices. This means that when we go to save the resulting tangents, we inevitably end up trying to write to the same vertex from multiple different threads which is a big no no. You can see the issue with this method below:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(384),alt:"./black_triangles.png"}})]),t._v(" "),s("p",[t._v("Those black triangles were the result of multiple GPU threads trying to modify the same vertices. Looking at the data in Render Doc I could see that the tangents and bitangents were garbage numbers such as "),s("code",[t._v("NaN")]),t._v(".")]),t._v(" "),s("p",[s("img",{attrs:{src:a(385),alt:"./render_doc_output.png"}})]),t._v(" "),s("p",[t._v("While on the CPU we could introduce a synchronization primitive such as a "),s("code",[t._v("Mutex")]),t._v(" to fix this issue, AFAIK there isn't really such a thing on the GPU. Instead, I decided to swap my code to work with each vertex individually. There are some hurdles with that, but those will be easier to explain in code. Let's start with the "),s("code",[t._v("main")]),t._v(" function.")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" gl_GlobalInvocationID"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n dstVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We use the "),s("code",[t._v("gl_GlobalInvocationID.x")]),t._v(" to get the index of the vertex we want to compute the tangents for. I opted to put the actual calculation into its own method. Let's take a look at that.")]),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[t._v("ModelVertex "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" trianglesIncluded "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Find the triangles that use v")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// * Loop over every triangle (i + 3)")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" numIndices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Only perform the calculation if one of the indices")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// matches our vertexIndex")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" r "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n trianglesIncluded "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangent and bitangents")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("trianglesIncluded "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Save the results")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ty "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("by "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bz "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"possible-improvements"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#possible-improvements"}},[t._v("#")]),t._v(" Possible Improvements")]),t._v(" "),s("p",[t._v("Looping over every triangle for every vertex is likely raising some red flags for some of you. In a single-threaded context, this algorithm would end up being O(N*M). As we are utilizing the high number of threads available to our GPU, this is less of an issue, but it still means our GPU is burning more cycles than it needs to.")]),t._v(" "),s("p",[t._v("One way I came up with to possibly improve performance is to store the index of each triangle in a hash map like structure with the vertex index as keys. Here's some pseudo code:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'd then need to flatten this structure to pass it to the GPU. We'd also need a second array to index the first.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_v"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t_list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleMapIndex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n start"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n len"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" t_list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n flat_triangle_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("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 than the simple method.")]),t._v(" "),s("h2",{attrs:{id:"results"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#results"}},[t._v("#")]),t._v(" Results")]),t._v(" "),s("p",[t._v("The tangents and bitangents are now getting calculated correctly and on the GPU!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(386),alt:"./results.png"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/34.0fe8e5e4.js b/assets/js/34.6d46e05a.js similarity index 97% rename from assets/js/34.0fe8e5e4.js rename to assets/js/34.6d46e05a.js index f34ae8ca..a1478fe0 100644 --- a/assets/js/34.0fe8e5e4.js +++ b/assets/js/34.6d46e05a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return c})),n.d(e,"g",(function(){return p})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return u})),n.d(e,"e",(function(){return d})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return v}));n(93);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,a=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function c(t){return a.test(t)}function p(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function u(t){if(c(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return s.test(i)?t:i+".html"+n}function d(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function h(t,e,n){if(c(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=a.sidebar||s.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function v(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},301:function(t,e,n){},308:function(t,e,n){"use strict";n(301)},319:function(t,e,n){"use strict";n.r(e);n(93);var r=n(261);function i(t,e,n){const r=[];!function t(e,n){for(let r=0,i=e.length;r({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=a.sidebar||s.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function v(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},301:function(t,e,n){},308:function(t,e,n){"use strict";n(301)},319:function(t,e,n){"use strict";n.r(e);n(92);var r=n(261);function i(t,e,n){const r=[];!function t(e,n){for(let r=0,i=e.length;r({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const u=s.sidebar||a.sidebar;if(u){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,u);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const a=e.children||[];return 0===a.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},290:function(t,e,n){},294:function(t,e,n){"use strict";n(290)},297:function(t,e,n){"use strict";n.r(e);var r=n(261);function i(t,e,n,r){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}},n)}function a(t,e,n,s,u,o=1){return!e||o>u?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const c=Object(r.e)(s,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,c),a(t,e.children,n,s,u,o+1)])}))}var s={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:s,$themeConfig:u,$themeLocaleConfig:o},props:{item:c,sidebarDepth:l}}){const p=Object(r.e)(s,c.path),f="auto"===c.type?p||c.children.some(t=>Object(r.e)(s,c.basePath+"#"+t.slug)):p,h="external"===c.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,c.path,c.title||c.path):i(t,c.path,c.title||c.path,f),d=e.frontmatter.sidebarDepth||l||o.sidebarDepth||u.sidebarDepth,b=null==d?1:d,g=o.displayAllHeaders||u.displayAllHeaders;if("auto"===c.type)return[h,a(t,c.children,c.basePath,s,b)];if((f||g)&&c.headers&&!r.d.test(c.path)){return[h,a(t,Object(r.c)(c.headers),c.path,s,b)]}return h}},u=(n(294),n(7)),o=Object(u.a)(s,void 0,void 0,!1,null,null,null);e.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return o})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(92);const r=/#.*$/,i=/\.(md|html)$/,a=/\/$/,s=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function u(t){return decodeURI(t).replace(r,"").replace(i,"")}function o(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function p(t){if(o(t))return t;const e=t.match(r),n=e?e[0]:"",i=u(t);return a.test(i)?t:i+".html"+n}function f(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return u(t.path)===u(e)}function h(t,e,n){if(o(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const u=s.sidebar||a.sidebar;if(u){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,u);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const a=e.children||[];return 0===a.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},290:function(t,e,n){},294:function(t,e,n){"use strict";n(290)},297:function(t,e,n){"use strict";n.r(e);var r=n(261);function i(t,e,n,r){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}},n)}function a(t,e,n,s,u,o=1){return!e||o>u?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const c=Object(r.e)(s,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,c),a(t,e.children,n,s,u,o+1)])}))}var s={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:s,$themeConfig:u,$themeLocaleConfig:o},props:{item:c,sidebarDepth:l}}){const p=Object(r.e)(s,c.path),f="auto"===c.type?p||c.children.some(t=>Object(r.e)(s,c.basePath+"#"+t.slug)):p,h="external"===c.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,c.path,c.title||c.path):i(t,c.path,c.title||c.path,f),d=e.frontmatter.sidebarDepth||l||o.sidebarDepth||u.sidebarDepth,b=null==d?1:d,g=o.displayAllHeaders||u.displayAllHeaders;if("auto"===c.type)return[h,a(t,c.children,c.basePath,s,b)];if((f||g)&&c.headers&&!r.d.test(c.path)){return[h,a(t,Object(r.c)(c.headers),c.path,s,b)]}return h}},u=(n(294),n(7)),o=Object(u.a)(s,void 0,void 0,!1,null,null,null);e.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/36.beae0010.js b/assets/js/36.aff12c07.js similarity index 61% rename from assets/js/36.beae0010.js rename to assets/js/36.aff12c07.js index 78d624ff..53f551e0 100644 --- a/assets/js/36.beae0010.js +++ b/assets/js/36.aff12c07.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{345:function(t,s,a){t.exports=a.p+"assets/img/cubes.988d14be.png"},346:function(t,s,a){t.exports=a.p+"assets/img/cube-diffuse.03fc55af.jpg"},347:function(t,s,a){t.exports=a.p+"assets/img/cubes-correct.2db711eb.png"},440:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"model-loading"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#model-loading"}},[t._v("#")]),t._v(" Model Loading")]),t._v(" "),s("p",[t._v("Up to this point, we've been creating our models manually. While this is an acceptable way to do this, it's really slow if we want to include complex models with lots of polygons. Because of this, we're going to modify our code to leverage the "),s("code",[t._v(".obj")]),t._v(" model format so that we can create a model in software such as Blender and display it in our code.")]),t._v(" "),s("p",[t._v("Our "),s("code",[t._v("lib.rs")]),t._v(" file is getting pretty cluttered. Let's create a "),s("code",[t._v("model.rs")]),t._v(" file into which we can put our model loading code.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You'll notice a couple of things here. In "),s("code",[t._v("lib.rs")]),t._v(", we had "),s("code",[t._v("Vertex")]),t._v(" as a struct, but here we're using a trait. We could have multiple vertex types (model, UI, instance data, etc.). Making "),s("code",[t._v("Vertex")]),t._v(" a trait will allow us to abstract out the "),s("code",[t._v("VertexBufferLayout")]),t._v(" creation code to make creating "),s("code",[t._v("RenderPipeline")]),t._v("s simpler.")]),t._v(" "),s("p",[t._v("Another thing to mention is the "),s("code",[t._v("normal")]),t._v(" field in "),s("code",[t._v("ModelVertex")]),t._v(". We won't use this until we talk about lighting, but will add it to the struct for now.")]),t._v(" "),s("p",[t._v("Let's define our "),s("code",[t._v("VertexBufferLayout")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This is basically the same as the original "),s("code",[t._v("VertexBufferLayout")]),t._v(", but we added a "),s("code",[t._v("VertexAttribute")]),t._v(" for the "),s("code",[t._v("normal")]),t._v(". Remove the "),s("code",[t._v("Vertex")]),t._v(" struct in "),s("code",[t._v("lib.rs")]),t._v(" as we won't need it anymore, and use our new "),s("code",[t._v("Vertex")]),t._v(" from "),s("code",[t._v("model")]),t._v(" for the "),s("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),s("p",[t._v("We will also remove our homemade "),s("code",[t._v("vertex_buffer")]),t._v(", "),s("code",[t._v("index_buffer")]),t._v(" and "),s("code",[t._v("num_indices")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Since the "),s("code",[t._v("desc")]),t._v(" method is implemented on the "),s("code",[t._v("Vertex")]),t._v(" trait, the trait needs to be imported before the method will be accessible. Put the import towards the top of the file with the others.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that in place, we need a model to render. If you have one already, that's great, but I've supplied a "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/blob/master/code/beginner/tutorial9-models/res/cube.zip",target:"_blank",rel:"noopener noreferrer"}},[t._v("zip file"),s("OutboundLink")],1),t._v(" with the model and all of its textures. We're going to put this model in a new "),s("code",[t._v("res")]),t._v(" folder next to the existing "),s("code",[t._v("src")]),t._v(" folder.")]),t._v(" "),s("h2",{attrs:{id:"accessing-files-in-the-res-folder"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-in-the-res-folder"}},[t._v("#")]),t._v(" Accessing files in the res folder")]),t._v(" "),s("p",[t._v("When Cargo builds and runs our program, it sets what's known as the current working directory. This directory usually contains your project's root "),s("code",[t._v("Cargo.toml")]),t._v(". The path to our res folder may differ depending on the project's structure. In the "),s("code",[t._v("res")]),t._v(" folder, the example code for this section tutorial is at "),s("code",[t._v("code/beginner/tutorial9-models/res/")]),t._v(". When loading our model, we could use this path and just append "),s("code",[t._v("cube.obj")]),t._v(". This is fine, but if we change our project's structure, our code will break.")]),t._v(" "),s("p",[t._v("We're going to fix that by modifying our build script to copy our "),s("code",[t._v("res")]),t._v(" folder to where Cargo creates our executable, and we'll reference it from there. Create a file called "),s("code",[t._v("build.rs")]),t._v(" and add the following:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("copy_items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("env"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This tells Cargo to rerun this script if something in /res/ changes.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("println!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cargo:rerun-if-changed=res/*"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" out_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" copy_options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n copy_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("overwrite "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" paths_to_copy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n paths_to_copy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_items")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("paths_to_copy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" out_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("copy_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Make sure to put "),s("code",[t._v("build.rs")]),t._v(" in the same folder as the "),s("code",[t._v("Cargo.toml")]),t._v(". If you don't, Cargo won't run it when your crate builds.")])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The "),s("code",[t._v("OUT_DIR")]),t._v(" is an environment variable that Cargo uses to specify where our application will be built.")])]),t._v(" "),s("p",[t._v("You'll need to modify your "),s("code",[t._v("Cargo.toml")]),t._v(" for this to work properly. Add the following below your "),s("code",[t._v("[dependencies]")]),t._v(" block.")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("build-dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("fs_extra")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.2"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("glob")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),s("h2",{attrs:{id:"accessing-files-from-wasm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-from-wasm"}},[t._v("#")]),t._v(" Accessing files from WASM")]),t._v(" "),s("p",[t._v("By design, you can't access files on a user's filesystem in Web Assembly. Instead, we'll serve those files up using a web serve and then load those files into our code using an http request. In order to simplify this, let's create a file called "),s("code",[t._v("resources.rs")]),t._v(" to handle this for us. We'll create two functions that load text and binary files, respectively.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("io"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cfg_if"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("cfg_if"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("format_url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" location "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" origin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("origin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ends_with")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"learn-wgpu"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n origin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{}/learn-wgpu"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" base "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{}/"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_to_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("txt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("We're using "),s("code",[t._v("OUT_DIR")]),t._v(" on desktop to access our "),s("code",[t._v("res")]),t._v(" folder.")])]),t._v(" "),s("p",[t._v("I'm using "),s("a",{attrs:{href:"https://docs.rs/reqwest",target:"_blank",rel:"noopener noreferrer"}},[t._v("reqwest"),s("OutboundLink")],1),t._v(" to handle loading the requests when using WASM. Add the following to the "),s("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Other dependencies")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("reqwest")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.11"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll also need to add the "),s("code",[t._v("Location")]),t._v(" feature to "),s("code",[t._v("web-sys")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Location"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Make sure to add "),s("code",[t._v("resources")]),t._v(" as a module in "),s("code",[t._v("lib.rs")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("resources")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"loading-models-with-tobj"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-models-with-tobj"}},[t._v("#")]),t._v(" Loading models with TOBJ")]),t._v(" "),s("p",[t._v("We're going to use the "),s("a",{attrs:{href:"https://docs.rs/tobj/3.0/tobj/",target:"_blank",rel:"noopener noreferrer"}},[t._v("tobj"),s("OutboundLink")],1),t._v(" library to load our model. Let's add it to our "),s("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other dependencies...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("tobj")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"3.2.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"async"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Before we can load our model, though, we need somewhere to put it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You'll notice that our "),s("code",[t._v("Model")]),t._v(" struct has a "),s("code",[t._v("Vec")]),t._v(" for the "),s("code",[t._v("meshes")]),t._v(" and "),s("code",[t._v("materials")]),t._v(". This is important as our obj file can include multiple meshes and materials. We still need to create the "),s("code",[t._v("Mesh")]),t._v(" and "),s("code",[t._v("Material")]),t._v(" classes, so let's do that.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("Material")]),t._v(" is pretty simple. It's just the name and one texture. Our cube obj actually has two textures, but one is a normal map, and we'll get to those "),s("a",{attrs:{href:"../../intermediate/tutorial11-normals"}},[t._v("later")]),t._v(". The name is more for debugging purposes.")]),t._v(" "),s("p",[t._v("Speaking of textures, we'll need to add a function to load a "),s("code",[t._v("Texture")]),t._v(" in "),s("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("load_texture")]),t._v(" method will be useful when we load the textures for our models, as "),s("code",[t._v("include_bytes!")]),t._v(" requires that we know the name of the file at compile time, which we can't really guarantee with model textures.")]),t._v(" "),s("p",[s("code",[t._v("Mesh")]),t._v(" holds a vertex buffer, an index buffer, and the number of indices in the mesh. We're using an "),s("code",[t._v("usize")]),t._v(" for the material. This "),s("code",[t._v("usize")]),t._v(" will index the "),s("code",[t._v("materials")]),t._v(" list when it comes time to draw.")]),t._v(" "),s("p",[t._v("With all that out of the way, we can get to loading our model.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_cursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_obj_buf_async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n single_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("p"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mat_text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("p"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_mtl_buf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mat_text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("h2",{attrs:{id:"rendering-a-mesh"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rendering-a-mesh"}},[t._v("#")]),t._v(" Rendering a mesh")]),t._v(" "),s("p",[t._v("Before we can draw the model, we need to be able to draw an individual mesh. Let's create a trait called "),s("code",[t._v("DrawModel")]),t._v(" and implement it for "),s("code",[t._v("RenderPass")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We could have put these methods in an "),s("code",[t._v("impl Model")]),t._v(", but I felt it made more sense to have the "),s("code",[t._v("RenderPass")]),t._v(" do all the rendering, as that's kind of its job. This does mean we have to import "),s("code",[t._v("DrawModel")]),t._v(" when we go to render, though.")]),t._v(" "),s("p",[t._v("When we removed "),s("code",[t._v("vertex_buffer")]),t._v(", etc., we also removed their render_pass setup.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Before that, though, we need to load the model and save it to "),s("code",[t._v("State")]),t._v(". Put the following in "),s("code",[t._v("State::new()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("resources"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cube.obj"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Our new model is a bit bigger than our previous one, so we're gonna need to adjust the spacing on our instances a bit.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" z "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("z "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that done, you should get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(345),alt:"cubes.png"}})]),t._v(" "),s("h2",{attrs:{id:"using-the-correct-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-the-correct-textures"}},[t._v("#")]),t._v(" Using the correct textures")]),t._v(" "),s("p",[t._v("If you look at the texture files for our obj, you'll see that they don't match up to our obj. The texture we want to see is this one,")]),t._v(" "),s("p",[s("img",{attrs:{src:a(346),alt:"cube-diffuse.jpg"}})]),t._v(" "),s("p",[t._v("but we're still getting our happy tree texture.")]),t._v(" "),s("p",[t._v("The reason for this is quite simple. Though we've created our textures, we haven't created a bind group to give to the "),s("code",[t._v("RenderPass")]),t._v(". We're still using our old "),s("code",[t._v("diffuse_bind_group")]),t._v(". If we want to change that, we need to use the bind group from our materials - the "),s("code",[t._v("bind_group")]),t._v(" member of the "),s("code",[t._v("Material")]),t._v(" struct.")]),t._v(" "),s("p",[t._v("We're going to add a material parameter to "),s("code",[t._v("DrawModel")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to change the render code to reflect this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that in place, we should get the following.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(347),alt:"cubes-correct.png"}})]),t._v(" "),s("h2",{attrs:{id:"rendering-the-entire-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rendering-the-entire-model"}},[t._v("#")]),t._v(" Rendering the entire model")]),t._v(" "),s("p",[t._v("Right now, we are specifying the mesh and the material directly. This is useful if we want to draw a mesh with a different material. We're also not rendering other parts of the model (if we had some). Let's create a method for "),s("code",[t._v("DrawModel")]),t._v(" that will draw all the parts of the model with their respective materials.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The code in "),s("code",[t._v("lib.rs")]),t._v(" will change accordingly.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("WasmExample",{attrs:{example:"tutorial9_models"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{345:function(t,s,a){t.exports=a.p+"assets/img/cubes.988d14be.png"},346:function(t,s,a){t.exports=a.p+"assets/img/cube-diffuse.03fc55af.jpg"},347:function(t,s,a){t.exports=a.p+"assets/img/cubes-correct.2db711eb.png"},440:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"model-loading"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#model-loading"}},[t._v("#")]),t._v(" Model Loading")]),t._v(" "),s("p",[t._v("Up to this point, we've been creating our models manually. While this is an acceptable way to do this, it's really slow if we want to include complex models with lots of polygons. Because of this, we're going to modify our code to leverage the "),s("code",[t._v(".obj")]),t._v(" model format so that we can create a model in software such as Blender and display it in our code.")]),t._v(" "),s("p",[t._v("Our "),s("code",[t._v("lib.rs")]),t._v(" file is getting pretty cluttered. Let's create a "),s("code",[t._v("model.rs")]),t._v(" file into which we can put our model loading code.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You'll notice a couple of things here. In "),s("code",[t._v("lib.rs")]),t._v(", we had "),s("code",[t._v("Vertex")]),t._v(" as a struct, but here we're using a trait. We could have multiple vertex types (model, UI, instance data, etc.). Making "),s("code",[t._v("Vertex")]),t._v(" a trait will allow us to abstract out the "),s("code",[t._v("VertexBufferLayout")]),t._v(" creation code to make creating "),s("code",[t._v("RenderPipeline")]),t._v("s simpler.")]),t._v(" "),s("p",[t._v("Another thing to mention is the "),s("code",[t._v("normal")]),t._v(" field in "),s("code",[t._v("ModelVertex")]),t._v(". We won't use this until we talk about lighting, but will add it to the struct for now.")]),t._v(" "),s("p",[t._v("Let's define our "),s("code",[t._v("VertexBufferLayout")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This is basically the same as the original "),s("code",[t._v("VertexBufferLayout")]),t._v(", but we added a "),s("code",[t._v("VertexAttribute")]),t._v(" for the "),s("code",[t._v("normal")]),t._v(". Remove the "),s("code",[t._v("Vertex")]),t._v(" struct in "),s("code",[t._v("lib.rs")]),t._v(" as we won't need it anymore, and use our new "),s("code",[t._v("Vertex")]),t._v(" from "),s("code",[t._v("model")]),t._v(" for the "),s("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),s("p",[t._v("We will also remove our homemade "),s("code",[t._v("vertex_buffer")]),t._v(", "),s("code",[t._v("index_buffer")]),t._v(" and "),s("code",[t._v("num_indices")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Since the "),s("code",[t._v("desc")]),t._v(" method is implemented on the "),s("code",[t._v("Vertex")]),t._v(" trait, the trait needs to be imported before the method will be accessible. Put the import towards the top of the file with the others.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that in place, we need a model to render. If you have one already, that's great, but I've supplied a "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/blob/master/code/beginner/tutorial9-models/res/cube.zip",target:"_blank",rel:"noopener noreferrer"}},[t._v("zip file"),s("OutboundLink")],1),t._v(" with the model and all of its textures. We're going to put this model in a new "),s("code",[t._v("res")]),t._v(" folder next to the existing "),s("code",[t._v("src")]),t._v(" folder.")]),t._v(" "),s("h2",{attrs:{id:"accessing-files-in-the-res-folder"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-in-the-res-folder"}},[t._v("#")]),t._v(" Accessing files in the res folder")]),t._v(" "),s("p",[t._v("When Cargo builds and runs our program, it sets what's known as the current working directory. This directory usually contains your project's root "),s("code",[t._v("Cargo.toml")]),t._v(". The path to our res folder may differ depending on the project's structure. In the "),s("code",[t._v("res")]),t._v(" folder, the example code for this section tutorial is at "),s("code",[t._v("code/beginner/tutorial9-models/res/")]),t._v(". When loading our model, we could use this path and just append "),s("code",[t._v("cube.obj")]),t._v(". This is fine, but if we change our project's structure, our code will break.")]),t._v(" "),s("p",[t._v("We're going to fix that by modifying our build script to copy our "),s("code",[t._v("res")]),t._v(" folder to where Cargo creates our executable, and we'll reference it from there. Create a file called "),s("code",[t._v("build.rs")]),t._v(" and add the following:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("copy_items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("env"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This tells Cargo to rerun this script if something in /res/ changes.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("println!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cargo:rerun-if-changed=res/*"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" out_dir "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" copy_options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n copy_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("overwrite "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" paths_to_copy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n paths_to_copy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_items")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("paths_to_copy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" out_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("copy_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("Make sure to put "),s("code",[t._v("build.rs")]),t._v(" in the same folder as the "),s("code",[t._v("Cargo.toml")]),t._v(". If you don't, Cargo won't run it when your crate builds.")])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The "),s("code",[t._v("OUT_DIR")]),t._v(" is an environment variable that Cargo uses to specify where our application will be built.")])]),t._v(" "),s("p",[t._v("You'll need to modify your "),s("code",[t._v("Cargo.toml")]),t._v(" for this to work properly. Add the following below your "),s("code",[t._v("[dependencies]")]),t._v(" block.")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("build-dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("fs_extra")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.2"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("glob")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),s("h2",{attrs:{id:"accessing-files-from-wasm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-from-wasm"}},[t._v("#")]),t._v(" Accessing files from WASM")]),t._v(" "),s("p",[t._v("By design, you can't access files on a user's filesystem in Web Assembly. Instead, we'll serve those files up using a web serve and then load those files into our code using an http request. In order to simplify this, let's create a file called "),s("code",[t._v("resources.rs")]),t._v(" to handle this for us. We'll create two functions that load text and binary files, respectively.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("io"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cfg_if"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("cfg_if"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("format_url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" location "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" origin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("origin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ends_with")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"learn-wgpu"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n origin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{}/learn-wgpu"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" base "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{}/"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_to_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("txt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("We're using "),s("code",[t._v("OUT_DIR")]),t._v(" on desktop to access our "),s("code",[t._v("res")]),t._v(" folder.")])]),t._v(" "),s("p",[t._v("I'm using "),s("a",{attrs:{href:"https://docs.rs/reqwest",target:"_blank",rel:"noopener noreferrer"}},[t._v("reqwest"),s("OutboundLink")],1),t._v(" to handle loading the requests when using WASM. Add the following to the "),s("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Other dependencies")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("reqwest")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.11"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll also need to add the "),s("code",[t._v("Location")]),t._v(" feature to "),s("code",[t._v("web-sys")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Location"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Make sure to add "),s("code",[t._v("resources")]),t._v(" as a module in "),s("code",[t._v("lib.rs")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("resources")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"loading-models-with-tobj"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-models-with-tobj"}},[t._v("#")]),t._v(" Loading models with TOBJ")]),t._v(" "),s("p",[t._v("We're going to use the "),s("a",{attrs:{href:"https://docs.rs/tobj/3.0/tobj/",target:"_blank",rel:"noopener noreferrer"}},[t._v("tobj"),s("OutboundLink")],1),t._v(" library to load our model. Let's add it to our "),s("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other dependencies...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("tobj")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"3.2.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"async"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Before we can load our model, though, we need somewhere to put it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You'll notice that our "),s("code",[t._v("Model")]),t._v(" struct has a "),s("code",[t._v("Vec")]),t._v(" for the "),s("code",[t._v("meshes")]),t._v(" and "),s("code",[t._v("materials")]),t._v(". This is important as our obj file can include multiple meshes and materials. We still need to create the "),s("code",[t._v("Mesh")]),t._v(" and "),s("code",[t._v("Material")]),t._v(" classes, so let's do that.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("Material")]),t._v(" is pretty simple. It's just the name and one texture. Our cube obj actually has two textures, but one is a normal map, and we'll get to those "),s("a",{attrs:{href:"../../intermediate/tutorial11-normals"}},[t._v("later")]),t._v(". The name is more for debugging purposes.")]),t._v(" "),s("p",[t._v("Speaking of textures, we'll need to add a function to load a "),s("code",[t._v("Texture")]),t._v(" in "),s("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("load_texture")]),t._v(" method will be useful when we load the textures for our models, as "),s("code",[t._v("include_bytes!")]),t._v(" requires that we know the name of the file at compile time, which we can't really guarantee with model textures.")]),t._v(" "),s("p",[s("code",[t._v("Mesh")]),t._v(" holds a vertex buffer, an index buffer, and the number of indices in the mesh. We're using an "),s("code",[t._v("usize")]),t._v(" for the material. This "),s("code",[t._v("usize")]),t._v(" will index the "),s("code",[t._v("materials")]),t._v(" list when it comes time to draw.")]),t._v(" "),s("p",[t._v("With all that out of the way, we can get to loading our model.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_cursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_obj_buf_async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n single_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("p"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mat_text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("p"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_mtl_buf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mat_text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("h2",{attrs:{id:"rendering-a-mesh"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rendering-a-mesh"}},[t._v("#")]),t._v(" Rendering a mesh")]),t._v(" "),s("p",[t._v("Before we can draw the model, we need to be able to draw an individual mesh. Let's create a trait called "),s("code",[t._v("DrawModel")]),t._v(" and implement it for "),s("code",[t._v("RenderPass")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We could have put these methods in an "),s("code",[t._v("impl Model")]),t._v(", but I felt it made more sense to have the "),s("code",[t._v("RenderPass")]),t._v(" do all the rendering, as that's kind of its job. This does mean we have to import "),s("code",[t._v("DrawModel")]),t._v(" when we go to render, though.")]),t._v(" "),s("p",[t._v("When we removed "),s("code",[t._v("vertex_buffer")]),t._v(", etc., we also removed their render_pass setup.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Before that, though, we need to load the model and save it to "),s("code",[t._v("State")]),t._v(". Put the following in "),s("code",[t._v("State::new()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("resources"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cube.obj"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Our new model is a bit bigger than our previous one, so we're gonna need to adjust the spacing on our instances a bit.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" z "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("z "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that done, you should get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(345),alt:"cubes.png"}})]),t._v(" "),s("h2",{attrs:{id:"using-the-correct-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-the-correct-textures"}},[t._v("#")]),t._v(" Using the correct textures")]),t._v(" "),s("p",[t._v("If you look at the texture files for our obj, you'll see that they don't match up to our obj. The texture we want to see is this one,")]),t._v(" "),s("p",[s("img",{attrs:{src:a(346),alt:"cube-diffuse.jpg"}})]),t._v(" "),s("p",[t._v("but we're still getting our happy tree texture.")]),t._v(" "),s("p",[t._v("The reason for this is quite simple. Though we've created our textures, we haven't created a bind group to give to the "),s("code",[t._v("RenderPass")]),t._v(". We're still using our old "),s("code",[t._v("diffuse_bind_group")]),t._v(". If we want to change that, we need to use the bind group from our materials - the "),s("code",[t._v("bind_group")]),t._v(" member of the "),s("code",[t._v("Material")]),t._v(" struct.")]),t._v(" "),s("p",[t._v("We're going to add a material parameter to "),s("code",[t._v("DrawModel")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to change the render code to reflect this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that in place, we should get the following.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(347),alt:"cubes-correct.png"}})]),t._v(" "),s("h2",{attrs:{id:"rendering-the-entire-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rendering-the-entire-model"}},[t._v("#")]),t._v(" Rendering the entire model")]),t._v(" "),s("p",[t._v("Right now, we are specifying the mesh and the material directly. This is useful if we want to draw a mesh with a different material. We're also not rendering other parts of the model (if we had some). Let's create a method for "),s("code",[t._v("DrawModel")]),t._v(" that will draw all the parts of the model with their respective materials.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The code in "),s("code",[t._v("lib.rs")]),t._v(" will change accordingly.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("WasmExample",{attrs:{example:"tutorial9_models"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/41.1f4594f7.js b/assets/js/41.2442c18a.js similarity index 99% rename from assets/js/41.1f4594f7.js rename to assets/js/41.2442c18a.js index a3483046..c607c1c4 100644 --- a/assets/js/41.1f4594f7.js +++ b/assets/js/41.2442c18a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{328: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"},329:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},433:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"the-surface"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-surface"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),s("h2",{attrs:{id:"first-some-housekeeping-state"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#first-some-housekeeping-state"}},[t._v("#")]),t._v(" First, some housekeeping: State")]),t._v(" "),s("p",[t._v("For convenience, we're going to pack all the fields into a struct and create some methods for it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The window must be declared after the surface so")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// it gets dropped after it as the surface contains")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unsafe references to the window's resources.")]),t._v("\n window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Creating some of the wgpu types requires async code")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("I'm glossing over "),s("code",[t._v("State")]),t._v("s fields, but they'll make more sense as I explain the code behind these methods.")]),t._v(" "),s("h2",{attrs:{id:"state-new"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#state-new"}},[t._v("#")]),t._v(" State::new()")]),t._v(" "),s("p",[t._v("The code for this is pretty straightforward, but let's break it down a bit.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inner_size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The instance is a handle to our GPU")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Backends::all => Vulkan + Metal + DX12 + Browser WebGPU")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n backends"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// # Safety")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The surface needs to live as long as the window that created it.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// State owns the window, so this should be safe.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n force_fallback_adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"instance-and-adapter"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#instance-and-adapter"}},[t._v("#")]),t._v(" Instance and Adapter")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("instance")]),t._v(" is the first thing you create when using wgpu. Its main purpose\nis to create "),s("code",[t._v("Adapter")]),t._v("s and "),s("code",[t._v("Surface")]),t._v("s.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("adapter")]),t._v(" is a handle for 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 "),s("code",[t._v("Device")]),t._v(" and "),s("code",[t._v("Queue")]),t._v(" later. Let's discuss the fields of "),s("code",[t._v("RequestAdapterOptions")]),t._v(".")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("power_preference")]),t._v(" has two variants: "),s("code",[t._v("LowPower")]),t._v(" and "),s("code",[t._v("HighPerformance")]),t._v(". "),s("code",[t._v("LowPower")]),t._v(" will pick an adapter that favors battery life, such as an integrated GPU. "),s("code",[t._v("HighPerformance")]),t._v(" will pick an adapter for more power-hungry yet more performant GPU's, such as a dedicated graphics card. WGPU will favor "),s("code",[t._v("LowPower")]),t._v(" if there is no adapter for the "),s("code",[t._v("HighPerformance")]),t._v(" option.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("compatible_surface")]),t._v(" field tells wgpu to find an adapter that can present to the supplied surface.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("force_fallback_adapter")]),t._v(' forces wgpu to pick an adapter that will work on all hardware. This usually means that the rendering backend will use a "software" system instead of hardware such as a GPU.')])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The options I've passed to "),s("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, "),s("code",[t._v("request_adapter")]),t._v(" will return "),s("code",[t._v("None")]),t._v(". If you want to get all adapters for a particular backend, you can use "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate_adapters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("adapter"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Check if this adapter supports our surface")]),t._v("\n adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_surface_supported")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("One thing to note is that "),s("code",[t._v("enumerate_adapters")]),t._v(" isn't available on WASM, so you have to use "),s("code",[t._v("request_adapter")]),t._v(".")]),t._v(" "),s("p",[t._v("Another thing to note is that "),s("code",[t._v("Adapter")]),t._v("s are locked to a specific backend. If you are on Windows and have two graphics cards, you'll have at least four adapters available to use: 2 Vulkan and 2 DirectX.")]),t._v(" "),s("p",[t._v("For more fields you can use to refine your search, "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Adapter.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("h3",{attrs:{id:"the-surface-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-surface-2"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),s("p",[t._v("The "),s("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 "),s("code",[t._v("window")]),t._v(" needs to implement "),s("a",{attrs:{href:"https://crates.io/crates/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),s("OutboundLink")],1),t._v("'s "),s("code",[t._v("HasRawWindowHandle")]),t._v(" trait to create a surface. Fortunately, winit's "),s("code",[t._v("Window")]),t._v(" fits the bill. We also need it to request our "),s("code",[t._v("adapter")]),t._v(".")]),t._v(" "),s("h3",{attrs:{id:"device-and-queue"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#device-and-queue"}},[t._v("#")]),t._v(" Device and Queue")]),t._v(" "),s("p",[t._v("Let's use the "),s("code",[t._v("adapter")]),t._v(" to create the device and queue.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n features"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Features")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("empty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// WebGL doesn't support all of wgpu's features, so if")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we're building for the web, we'll have to disable some.")]),t._v("\n limits"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target_arch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("downlevel_webgl2_defaults")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Trace path")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("features")]),t._v(" field on "),s("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(" "),s("div",{staticClass:"note"},[s("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(" "),s("p",[t._v("You can get a list of features supported by your device using "),s("code",[t._v("adapter.features()")]),t._v(" or "),s("code",[t._v("device.features()")]),t._v(".")]),t._v(" "),s("p",[t._v("You can view a full list of features "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Features.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("p",[t._v("The "),s("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 "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Limits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_caps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_capabilities")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Shader code in this tutorial assumes an sRGB surface texture. Using a different")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// one will result in all the colors coming out darker. If you want to support non")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// sRGB surfaces, you'll need to account for that when drawing to the frame.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_format "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copied")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_srgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("present_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("alpha_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Here we are defining a config for our surface. This will define how the surface creates its underlying "),s("code",[t._v("SurfaceTexture")]),t._v("s. We will talk about "),s("code",[t._v("SurfaceTexture")]),t._v(" when we get to the "),s("code",[t._v("render")]),t._v(" function. For now, let's talk about the config's fields.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("usage")]),t._v(" field describes how "),s("code",[t._v("SurfaceTexture")]),t._v("s will be used. "),s("code",[t._v("RENDER_ATTACHMENT")]),t._v(" specifies that the textures will be used to write to the screen (we'll talk about more "),s("code",[t._v("TextureUsages")]),t._v("s later).")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("format")]),t._v(" defines how "),s("code",[t._v("SurfaceTexture")]),t._v("s will be stored on the GPU. We can get a supported format from the "),s("code",[t._v("SurfaceCapabilities")]),t._v(".")]),t._v(" "),s("p",[s("code",[t._v("width")]),t._v(" and "),s("code",[t._v("height")]),t._v(" are the width and the height in pixels of a "),s("code",[t._v("SurfaceTexture")]),t._v(". This should usually be the width and the height of the window.")]),t._v(" "),s("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(" "),s("p",[s("code",[t._v("present_mode")]),t._v(" uses "),s("code",[t._v("wgpu::PresentMode")]),t._v(" enum, which determines how to sync the surface with the display. For the sake of simplicity, we select the first available option. If you do not want runtime selection, "),s("code",[t._v("PresentMode::Fifo")]),t._v(" will cap the display rate at the display's framerate. This is essentially VSync. This mode is guaranteed to be supported on all platforms. There are other options, and you can see all of them "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.PresentMode.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the docs"),s("OutboundLink")],1)]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you want to let your users pick what "),s("code",[t._v("PresentMode")]),t._v(" they use, you can use "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SurfaceCapabilities.html#structfield.present_modes",target:"_blank",rel:"noopener noreferrer"}},[t._v("SurfaceCapabilities::present_modes"),s("OutboundLink")],1),t._v(" to get a list of all the "),s("code",[t._v("PresentMode")]),t._v("s the surface supports:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" modes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("present_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Regardless, "),s("code",[t._v("PresentMode::Fifo")]),t._v(" will always be supported, and "),s("code",[t._v("PresentMode::AutoVsync")]),t._v(" and "),s("code",[t._v("PresentMode::AutoNoVsync")]),t._v(" have fallback support and therefore will work on all platforms.")])]),t._v(" "),s("p",[s("code",[t._v("alpha_mode")]),t._v(" is honestly not something I'm familiar with. I believe it has something to do with transparent windows, but feel free to open a pull request. For now, we'll just use the first "),s("code",[t._v("AlphaMode")]),t._v(" in the list given by "),s("code",[t._v("surface_caps")]),t._v(".")]),t._v(" "),s("p",[s("code",[t._v("view_formats")]),t._v(" is a list of "),s("code",[t._v("TextureFormat")]),t._v("s that you can use when creating "),s("code",[t._v("TextureView")]),t._v("s (we'll cover those briefly later in this tutorial as well as more in depth "),s("a",{attrs:{href:"../tutorial5-textures"}},[t._v("in the texture tutorial")]),t._v("). As of writing, this means that if your surface is sRGB color space, you can create a texture view that uses a linear color space.")]),t._v(" "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Since our "),s("code",[t._v("State::new()")]),t._v(" method is async, we need to change "),s("code",[t._v("run()")]),t._v(" to be async as well so that we can await it.")]),t._v(" "),s("p",[t._v("Our "),s("code",[t._v("window")]),t._v(" has beened moved to the State instance, we will need to update our "),s("code",[t._v("event_loop")]),t._v(" to reflect this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg_attr(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(", wasm_bindgen(start))]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Window setup...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n event_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that "),s("code",[t._v("run()")]),t._v(" is async, "),s("code",[t._v("main()")]),t._v(" will need some way to await the future. We could use a crate like "),s("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),s("OutboundLink")],1),t._v(", or "),s("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),s("OutboundLink")],1),t._v(", but I'm going to go with the much more lightweight "),s("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster"),s("OutboundLink")],1),t._v(". Add the following to your "),s("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),s("p",[t._v("We then use the "),s("code",[t._v("block_on")]),t._v(" function provided by pollster to await our future:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"warning"},[s("p",[t._v("Don't use "),s("code",[t._v("block_on")]),t._v(" inside of an async function if you plan to support WASM. Futures have to be run using the browser's executor. If you try to bring your own, your code will crash when you encounter a future that doesn't execute immediately.")])]),t._v(" "),s("p",[t._v("If we try to build WASM now, it will fail because "),s("code",[t._v("wasm-bindgen")]),t._v(" doesn't support using async functions as "),s("code",[t._v("start")]),t._v(" methods. You could switch to calling "),s("code",[t._v("run")]),t._v(" manually in javascript, but for simplicity, we'll add the "),s("a",{attrs:{href:"https://docs.rs/wasm-bindgen-futures",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-futures"),s("OutboundLink")],1),t._v(" crate to our WASM dependencies as that doesn't require us to change any code. Your dependencies should look something like this:")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cfg-if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.28"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.10"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_error_panic_hook")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1.6"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_log")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"webgl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen-futures")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"resize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resize"}},[t._v("#")]),t._v(" resize()")]),t._v(" "),s("p",[t._v("If we want to support resizing in our application, we're going to need to reconfigure the "),s("code",[t._v("surface")]),t._v(" every time the window's size changes. That's the reason we stored the physical "),s("code",[t._v("size")]),t._v(" and the "),s("code",[t._v("config")]),t._v(" used to configure the "),s("code",[t._v("surface")]),t._v(". With all of these, the resize method is very simple.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("There's nothing different here from the initial "),s("code",[t._v("surface")]),t._v(" configuration, so I won't get into it.")]),t._v(" "),s("p",[t._v("We call this method "),s("code",[t._v("run()")]),t._v(" in the event loop for the following events.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"input"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input()")]),t._v(" "),s("p",[s("code",[t._v("input()")]),t._v(" returns a "),s("code",[t._v("bool")]),t._v(" to indicate whether an event has been fully processed. If the method returns "),s("code",[t._v("true")]),t._v(", the main loop won't process the event any further.")]),t._v(" "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to do a little more work in the event loop. We want "),s("code",[t._v("State")]),t._v(" to have priority over "),s("code",[t._v("run()")]),t._v(". Doing that (and previous changes) should make your loop look like this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"update"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update"}},[t._v("#")]),t._v(" update()")]),t._v(" "),s("p",[t._v("We don't have anything to update yet, so leave the method empty.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// remove `todo!()`")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll add some code here later on to move around objects.")]),t._v(" "),s("h2",{attrs:{id:"render"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render()")]),t._v(" "),s("p",[t._v("Here's where the magic happens. First, we need to get a frame to render to.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("get_current_texture")]),t._v(" function will wait for the "),s("code",[t._v("surface")]),t._v(" to provide a new "),s("code",[t._v("SurfaceTexture")]),t._v(" that we will render to. We'll store this in "),s("code",[t._v("output")]),t._v(" for later.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("This line creates a "),s("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(" "),s("p",[t._v("We also need to create a "),s("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 "),s("code",[t._v("encoder")]),t._v(" builds a command buffer that we can then send to the GPU.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Encoder"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we can get to clearing the screen (a long time coming). We need to use the "),s("code",[t._v("encoder")]),t._v(" to create a "),s("code",[t._v("RenderPass")]),t._v(". The "),s("code",[t._v("RenderPass")]),t._v(" has all the methods for the actual drawing. The code for creating a "),s("code",[t._v("RenderPass")]),t._v(" is a bit nested, so I'll copy it all here before talking about its pieces.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" _render_pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n occlusion_query_set"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n timestamp_writes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// submit will accept anything that implements IntoIter")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("First things first, let's talk about the extra block ("),s("code",[t._v("{}")]),t._v(") around "),s("code",[t._v("encoder.begin_render_pass(...)")]),t._v(". "),s("code",[t._v("begin_render_pass()")]),t._v(" borrows "),s("code",[t._v("encoder")]),t._v(" mutably (aka "),s("code",[t._v("&mut self")]),t._v("). We can't call "),s("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 "),s("code",[t._v("encoder")]),t._v(" and allowing us to "),s("code",[t._v("finish()")]),t._v(" it. If you don't like the "),s("code",[t._v("{}")]),t._v(", you can also use "),s("code",[t._v("drop(render_pass)")]),t._v(" to achieve the same effect.")]),t._v(" "),s("p",[t._v("The last lines of the code tell "),s("code",[t._v("wgpu")]),t._v(" to finish the command buffer and submit it to the GPU's render queue.")]),t._v(" "),s("p",[t._v("We need to update the event loop again to call this method. We'll also call "),s("code",[t._v("update()")]),t._v(" before it, too.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Reconfigure the surface if lost")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Lost")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The system is out of memory, we should probably quit")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutOfMemory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All other errors (Outdated, Timeout) should be resolved by the next frame")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?}"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainEventsCleared")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// RedrawRequested will only trigger once unless we manually")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// request it.")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_redraw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that, you should be getting something that looks like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(328),alt:"Window with a blue background"}})]),t._v(" "),s("h2",{attrs:{id:"wait-what-s-going-on-with-renderpassdescriptor"}},[s("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(" "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("A "),s("code",[t._v("RenderPassDescriptor")]),t._v(" only has three fields: "),s("code",[t._v("label")]),t._v(", "),s("code",[t._v("color_attachments")]),t._v(" and "),s("code",[t._v("depth_stencil_attachment")]),t._v(". The "),s("code",[t._v("color_attachments")]),t._v(" describe where we are going to draw our color to. We use the "),s("code",[t._v("TextureView")]),t._v(" we created earlier to make sure that we render to the screen.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The "),s("code",[t._v("color_attachments")]),t._v(' field is a "sparse" array. This allows you to use a pipeline that expects multiple render targets and only supplies the ones you care about.')])]),t._v(" "),s("p",[t._v("We'll use "),s("code",[t._v("depth_stencil_attachment")]),t._v(" later, but we'll set it to "),s("code",[t._v("None")]),t._v(" for now.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("RenderPassColorAttachment")]),t._v(" has the "),s("code",[t._v("view")]),t._v(" field, which informs "),s("code",[t._v("wgpu")]),t._v(" what texture to save the colors to. In this case, we specify the "),s("code",[t._v("view")]),t._v(" that we created using "),s("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(" "),s("p",[t._v("The "),s("code",[t._v("resolve_target")]),t._v(" is the texture that will receive the resolved output. This will be the same as "),s("code",[t._v("view")]),t._v(" unless multisampling is enabled. We don't need to specify this, so we leave it as "),s("code",[t._v("None")]),t._v(".")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("ops")]),t._v(" field takes a "),s("code",[t._v("wpgu::Operations")]),t._v(" object. This tells wgpu what to do with the colors on the screen (specified by "),s("code",[t._v("view")]),t._v("). The "),s("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 "),s("code",[t._v("store")]),t._v(" field tells wgpu whether we want to store the rendered results to the "),s("code",[t._v("Texture")]),t._v(" behind our "),s("code",[t._v("TextureView")]),t._v(" (in this case, it's the "),s("code",[t._v("SurfaceTexture")]),t._v("). We use "),s("code",[t._v("StoreOp::Store")]),t._v(" as we do want to store our render results.")]),t._v(" "),s("div",{staticClass:"note"},[s("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(" "),s("p",[s("img",{attrs:{src:a(329),alt:"./no-clear.png"}})])]),t._v(" "),s("h2",{attrs:{id:"validation-errors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#validation-errors"}},[t._v("#")]),t._v(" Validation Errors?")]),t._v(" "),s("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 "),s("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 "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/gfx-rs/wgpu"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Modify the "),s("code",[t._v("input()")]),t._v(" method to capture mouse events, and update the clear color using that. "),s("em",[t._v("Hint: you'll probably need to use "),s("code",[t._v("WindowEvent::CursorMoved")])]),t._v(".")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial2_surface"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{330: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"},331:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},434:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"the-surface"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-surface"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),s("h2",{attrs:{id:"first-some-housekeeping-state"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#first-some-housekeeping-state"}},[t._v("#")]),t._v(" First, some housekeeping: State")]),t._v(" "),s("p",[t._v("For convenience, we're going to pack all the fields into a struct and create some methods for it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The window must be declared after the surface so")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// it gets dropped after it as the surface contains")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unsafe references to the window's resources.")]),t._v("\n window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Creating some of the wgpu types requires async code")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("I'm glossing over "),s("code",[t._v("State")]),t._v("s fields, but they'll make more sense as I explain the code behind these methods.")]),t._v(" "),s("h2",{attrs:{id:"state-new"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#state-new"}},[t._v("#")]),t._v(" State::new()")]),t._v(" "),s("p",[t._v("The code for this is pretty straightforward, but let's break it down a bit.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inner_size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The instance is a handle to our GPU")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Backends::all => Vulkan + Metal + DX12 + Browser WebGPU")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n backends"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// # Safety")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The surface needs to live as long as the window that created it.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// State owns the window, so this should be safe.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n force_fallback_adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"instance-and-adapter"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#instance-and-adapter"}},[t._v("#")]),t._v(" Instance and Adapter")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("instance")]),t._v(" is the first thing you create when using wgpu. Its main purpose\nis to create "),s("code",[t._v("Adapter")]),t._v("s and "),s("code",[t._v("Surface")]),t._v("s.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("adapter")]),t._v(" is a handle for 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 "),s("code",[t._v("Device")]),t._v(" and "),s("code",[t._v("Queue")]),t._v(" later. Let's discuss the fields of "),s("code",[t._v("RequestAdapterOptions")]),t._v(".")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("power_preference")]),t._v(" has two variants: "),s("code",[t._v("LowPower")]),t._v(" and "),s("code",[t._v("HighPerformance")]),t._v(". "),s("code",[t._v("LowPower")]),t._v(" will pick an adapter that favors battery life, such as an integrated GPU. "),s("code",[t._v("HighPerformance")]),t._v(" will pick an adapter for more power-hungry yet more performant GPU's, such as a dedicated graphics card. WGPU will favor "),s("code",[t._v("LowPower")]),t._v(" if there is no adapter for the "),s("code",[t._v("HighPerformance")]),t._v(" option.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("compatible_surface")]),t._v(" field tells wgpu to find an adapter that can present to the supplied surface.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("force_fallback_adapter")]),t._v(' forces wgpu to pick an adapter that will work on all hardware. This usually means that the rendering backend will use a "software" system instead of hardware such as a GPU.')])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The options I've passed to "),s("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, "),s("code",[t._v("request_adapter")]),t._v(" will return "),s("code",[t._v("None")]),t._v(". If you want to get all adapters for a particular backend, you can use "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate_adapters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("adapter"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Check if this adapter supports our surface")]),t._v("\n adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_surface_supported")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("One thing to note is that "),s("code",[t._v("enumerate_adapters")]),t._v(" isn't available on WASM, so you have to use "),s("code",[t._v("request_adapter")]),t._v(".")]),t._v(" "),s("p",[t._v("Another thing to note is that "),s("code",[t._v("Adapter")]),t._v("s are locked to a specific backend. If you are on Windows and have two graphics cards, you'll have at least four adapters available to use: 2 Vulkan and 2 DirectX.")]),t._v(" "),s("p",[t._v("For more fields you can use to refine your search, "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Adapter.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("h3",{attrs:{id:"the-surface-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-surface-2"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),s("p",[t._v("The "),s("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 "),s("code",[t._v("window")]),t._v(" needs to implement "),s("a",{attrs:{href:"https://crates.io/crates/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),s("OutboundLink")],1),t._v("'s "),s("code",[t._v("HasRawWindowHandle")]),t._v(" trait to create a surface. Fortunately, winit's "),s("code",[t._v("Window")]),t._v(" fits the bill. We also need it to request our "),s("code",[t._v("adapter")]),t._v(".")]),t._v(" "),s("h3",{attrs:{id:"device-and-queue"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#device-and-queue"}},[t._v("#")]),t._v(" Device and Queue")]),t._v(" "),s("p",[t._v("Let's use the "),s("code",[t._v("adapter")]),t._v(" to create the device and queue.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n features"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Features")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("empty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// WebGL doesn't support all of wgpu's features, so if")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we're building for the web, we'll have to disable some.")]),t._v("\n limits"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target_arch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("downlevel_webgl2_defaults")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Trace path")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("features")]),t._v(" field on "),s("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(" "),s("div",{staticClass:"note"},[s("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(" "),s("p",[t._v("You can get a list of features supported by your device using "),s("code",[t._v("adapter.features()")]),t._v(" or "),s("code",[t._v("device.features()")]),t._v(".")]),t._v(" "),s("p",[t._v("You can view a full list of features "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Features.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("p",[t._v("The "),s("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 "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Limits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_caps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_capabilities")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Shader code in this tutorial assumes an sRGB surface texture. Using a different")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// one will result in all the colors coming out darker. If you want to support non")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// sRGB surfaces, you'll need to account for that when drawing to the frame.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_format "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copied")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_srgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("present_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("alpha_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Here we are defining a config for our surface. This will define how the surface creates its underlying "),s("code",[t._v("SurfaceTexture")]),t._v("s. We will talk about "),s("code",[t._v("SurfaceTexture")]),t._v(" when we get to the "),s("code",[t._v("render")]),t._v(" function. For now, let's talk about the config's fields.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("usage")]),t._v(" field describes how "),s("code",[t._v("SurfaceTexture")]),t._v("s will be used. "),s("code",[t._v("RENDER_ATTACHMENT")]),t._v(" specifies that the textures will be used to write to the screen (we'll talk about more "),s("code",[t._v("TextureUsages")]),t._v("s later).")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("format")]),t._v(" defines how "),s("code",[t._v("SurfaceTexture")]),t._v("s will be stored on the GPU. We can get a supported format from the "),s("code",[t._v("SurfaceCapabilities")]),t._v(".")]),t._v(" "),s("p",[s("code",[t._v("width")]),t._v(" and "),s("code",[t._v("height")]),t._v(" are the width and the height in pixels of a "),s("code",[t._v("SurfaceTexture")]),t._v(". This should usually be the width and the height of the window.")]),t._v(" "),s("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(" "),s("p",[s("code",[t._v("present_mode")]),t._v(" uses "),s("code",[t._v("wgpu::PresentMode")]),t._v(" enum, which determines how to sync the surface with the display. For the sake of simplicity, we select the first available option. If you do not want runtime selection, "),s("code",[t._v("PresentMode::Fifo")]),t._v(" will cap the display rate at the display's framerate. This is essentially VSync. This mode is guaranteed to be supported on all platforms. There are other options, and you can see all of them "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.PresentMode.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the docs"),s("OutboundLink")],1)]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you want to let your users pick what "),s("code",[t._v("PresentMode")]),t._v(" they use, you can use "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SurfaceCapabilities.html#structfield.present_modes",target:"_blank",rel:"noopener noreferrer"}},[t._v("SurfaceCapabilities::present_modes"),s("OutboundLink")],1),t._v(" to get a list of all the "),s("code",[t._v("PresentMode")]),t._v("s the surface supports:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" modes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("present_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Regardless, "),s("code",[t._v("PresentMode::Fifo")]),t._v(" will always be supported, and "),s("code",[t._v("PresentMode::AutoVsync")]),t._v(" and "),s("code",[t._v("PresentMode::AutoNoVsync")]),t._v(" have fallback support and therefore will work on all platforms.")])]),t._v(" "),s("p",[s("code",[t._v("alpha_mode")]),t._v(" is honestly not something I'm familiar with. I believe it has something to do with transparent windows, but feel free to open a pull request. For now, we'll just use the first "),s("code",[t._v("AlphaMode")]),t._v(" in the list given by "),s("code",[t._v("surface_caps")]),t._v(".")]),t._v(" "),s("p",[s("code",[t._v("view_formats")]),t._v(" is a list of "),s("code",[t._v("TextureFormat")]),t._v("s that you can use when creating "),s("code",[t._v("TextureView")]),t._v("s (we'll cover those briefly later in this tutorial as well as more in depth "),s("a",{attrs:{href:"../tutorial5-textures"}},[t._v("in the texture tutorial")]),t._v("). As of writing, this means that if your surface is sRGB color space, you can create a texture view that uses a linear color space.")]),t._v(" "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Since our "),s("code",[t._v("State::new()")]),t._v(" method is async, we need to change "),s("code",[t._v("run()")]),t._v(" to be async as well so that we can await it.")]),t._v(" "),s("p",[t._v("Our "),s("code",[t._v("window")]),t._v(" has beened moved to the State instance, we will need to update our "),s("code",[t._v("event_loop")]),t._v(" to reflect this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg_attr(target_arch = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(", wasm_bindgen(start))]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Window setup...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n event_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that "),s("code",[t._v("run()")]),t._v(" is async, "),s("code",[t._v("main()")]),t._v(" will need some way to await the future. We could use a crate like "),s("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),s("OutboundLink")],1),t._v(", or "),s("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),s("OutboundLink")],1),t._v(", but I'm going to go with the much more lightweight "),s("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster"),s("OutboundLink")],1),t._v(". Add the following to your "),s("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),s("p",[t._v("We then use the "),s("code",[t._v("block_on")]),t._v(" function provided by pollster to await our future:")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"warning"},[s("p",[t._v("Don't use "),s("code",[t._v("block_on")]),t._v(" inside of an async function if you plan to support WASM. Futures have to be run using the browser's executor. If you try to bring your own, your code will crash when you encounter a future that doesn't execute immediately.")])]),t._v(" "),s("p",[t._v("If we try to build WASM now, it will fail because "),s("code",[t._v("wasm-bindgen")]),t._v(" doesn't support using async functions as "),s("code",[t._v("start")]),t._v(" methods. You could switch to calling "),s("code",[t._v("run")]),t._v(" manually in javascript, but for simplicity, we'll add the "),s("a",{attrs:{href:"https://docs.rs/wasm-bindgen-futures",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-futures"),s("OutboundLink")],1),t._v(" crate to our WASM dependencies as that doesn't require us to change any code. Your dependencies should look something like this:")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cfg-if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.28"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.10"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_error_panic_hook")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1.6"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_log")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"webgl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen-futures")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"resize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resize"}},[t._v("#")]),t._v(" resize()")]),t._v(" "),s("p",[t._v("If we want to support resizing in our application, we're going to need to reconfigure the "),s("code",[t._v("surface")]),t._v(" every time the window's size changes. That's the reason we stored the physical "),s("code",[t._v("size")]),t._v(" and the "),s("code",[t._v("config")]),t._v(" used to configure the "),s("code",[t._v("surface")]),t._v(". With all of these, the resize method is very simple.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("There's nothing different here from the initial "),s("code",[t._v("surface")]),t._v(" configuration, so I won't get into it.")]),t._v(" "),s("p",[t._v("We call this method "),s("code",[t._v("run()")]),t._v(" in the event loop for the following events.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"input"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input()")]),t._v(" "),s("p",[s("code",[t._v("input()")]),t._v(" returns a "),s("code",[t._v("bool")]),t._v(" to indicate whether an event has been fully processed. If the method returns "),s("code",[t._v("true")]),t._v(", the main loop won't process the event any further.")]),t._v(" "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to do a little more work in the event loop. We want "),s("code",[t._v("State")]),t._v(" to have priority over "),s("code",[t._v("run()")]),t._v(". Doing that (and previous changes) should make your loop look like this.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"update"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update"}},[t._v("#")]),t._v(" update()")]),t._v(" "),s("p",[t._v("We don't have anything to update yet, so leave the method empty.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// remove `todo!()`")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll add some code here later on to move around objects.")]),t._v(" "),s("h2",{attrs:{id:"render"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render()")]),t._v(" "),s("p",[t._v("Here's where the magic happens. First, we need to get a frame to render to.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("get_current_texture")]),t._v(" function will wait for the "),s("code",[t._v("surface")]),t._v(" to provide a new "),s("code",[t._v("SurfaceTexture")]),t._v(" that we will render to. We'll store this in "),s("code",[t._v("output")]),t._v(" for later.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("This line creates a "),s("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(" "),s("p",[t._v("We also need to create a "),s("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 "),s("code",[t._v("encoder")]),t._v(" builds a command buffer that we can then send to the GPU.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Encoder"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we can get to clearing the screen (a long time coming). We need to use the "),s("code",[t._v("encoder")]),t._v(" to create a "),s("code",[t._v("RenderPass")]),t._v(". The "),s("code",[t._v("RenderPass")]),t._v(" has all the methods for the actual drawing. The code for creating a "),s("code",[t._v("RenderPass")]),t._v(" is a bit nested, so I'll copy it all here before talking about its pieces.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" _render_pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n occlusion_query_set"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n timestamp_writes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// submit will accept anything that implements IntoIter")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("First things first, let's talk about the extra block ("),s("code",[t._v("{}")]),t._v(") around "),s("code",[t._v("encoder.begin_render_pass(...)")]),t._v(". "),s("code",[t._v("begin_render_pass()")]),t._v(" borrows "),s("code",[t._v("encoder")]),t._v(" mutably (aka "),s("code",[t._v("&mut self")]),t._v("). We can't call "),s("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 "),s("code",[t._v("encoder")]),t._v(" and allowing us to "),s("code",[t._v("finish()")]),t._v(" it. If you don't like the "),s("code",[t._v("{}")]),t._v(", you can also use "),s("code",[t._v("drop(render_pass)")]),t._v(" to achieve the same effect.")]),t._v(" "),s("p",[t._v("The last lines of the code tell "),s("code",[t._v("wgpu")]),t._v(" to finish the command buffer and submit it to the GPU's render queue.")]),t._v(" "),s("p",[t._v("We need to update the event loop again to call this method. We'll also call "),s("code",[t._v("update()")]),t._v(" before it, too.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Reconfigure the surface if lost")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Lost")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The system is out of memory, we should probably quit")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutOfMemory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All other errors (Outdated, Timeout) should be resolved by the next frame")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?}"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainEventsCleared")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// RedrawRequested will only trigger once unless we manually")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// request it.")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_redraw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With all that, you should be getting something that looks like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(330),alt:"Window with a blue background"}})]),t._v(" "),s("h2",{attrs:{id:"wait-what-s-going-on-with-renderpassdescriptor"}},[s("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(" "),s("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(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("A "),s("code",[t._v("RenderPassDescriptor")]),t._v(" only has three fields: "),s("code",[t._v("label")]),t._v(", "),s("code",[t._v("color_attachments")]),t._v(" and "),s("code",[t._v("depth_stencil_attachment")]),t._v(". The "),s("code",[t._v("color_attachments")]),t._v(" describe where we are going to draw our color to. We use the "),s("code",[t._v("TextureView")]),t._v(" we created earlier to make sure that we render to the screen.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The "),s("code",[t._v("color_attachments")]),t._v(' field is a "sparse" array. This allows you to use a pipeline that expects multiple render targets and only supplies the ones you care about.')])]),t._v(" "),s("p",[t._v("We'll use "),s("code",[t._v("depth_stencil_attachment")]),t._v(" later, but we'll set it to "),s("code",[t._v("None")]),t._v(" for now.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("RenderPassColorAttachment")]),t._v(" has the "),s("code",[t._v("view")]),t._v(" field, which informs "),s("code",[t._v("wgpu")]),t._v(" what texture to save the colors to. In this case, we specify the "),s("code",[t._v("view")]),t._v(" that we created using "),s("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(" "),s("p",[t._v("The "),s("code",[t._v("resolve_target")]),t._v(" is the texture that will receive the resolved output. This will be the same as "),s("code",[t._v("view")]),t._v(" unless multisampling is enabled. We don't need to specify this, so we leave it as "),s("code",[t._v("None")]),t._v(".")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("ops")]),t._v(" field takes a "),s("code",[t._v("wpgu::Operations")]),t._v(" object. This tells wgpu what to do with the colors on the screen (specified by "),s("code",[t._v("view")]),t._v("). The "),s("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 "),s("code",[t._v("store")]),t._v(" field tells wgpu whether we want to store the rendered results to the "),s("code",[t._v("Texture")]),t._v(" behind our "),s("code",[t._v("TextureView")]),t._v(" (in this case, it's the "),s("code",[t._v("SurfaceTexture")]),t._v("). We use "),s("code",[t._v("StoreOp::Store")]),t._v(" as we do want to store our render results.")]),t._v(" "),s("div",{staticClass:"note"},[s("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(" "),s("p",[s("img",{attrs:{src:a(331),alt:"./no-clear.png"}})])]),t._v(" "),s("h2",{attrs:{id:"validation-errors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#validation-errors"}},[t._v("#")]),t._v(" Validation Errors?")]),t._v(" "),s("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 "),s("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 "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/gfx-rs/wgpu"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Modify the "),s("code",[t._v("input()")]),t._v(" method to capture mouse events, and update the clear color using that. "),s("em",[t._v("Hint: you'll probably need to use "),s("code",[t._v("WindowEvent::CursorMoved")])]),t._v(".")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial2_surface"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/42.9f9eefa4.js b/assets/js/42.6f76d27e.js similarity index 99% rename from assets/js/42.9f9eefa4.js rename to assets/js/42.6f76d27e.js index 45f5f8f5..d36ff253 100644 --- a/assets/js/42.9f9eefa4.js +++ b/assets/js/42.6f76d27e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{341:function(t,s,a){t.exports=a.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},342:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyIAAAJzCAYAAADz6Ke4AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAByFSURBVHic7d1rkJ31fdjx3zl7EyAkIaEVSDJIsgdjiRiZCNIa5DQGh2majlt3WrtTe/rCY0/z2nnXvmtnept22pmOp3Y742ntJG2aJm16iwmMCWNS18gEEwwYBEK2bruLtLqiy+45T18ICV1W2ts5v/NcPp9XuuwePXvO8/z//+//Obtqbdy4sSiKIoaGhuLhhx+P7ds3x/r162N0dDQAAACWY2ZmJqanp+Oll16KPXv2RKfTiVarFcNFUcSqVavi85//fOzevTt2794dY2Njgz5eAACgJk6dOhV79uyJ559/Pr7zne/EyZMnY3hoaCi+8IUvxNe+9rWIiJieno5utzvgQwUAAOpiaGgoPv7xj8euXbsiIuIb3/hGDO/atSsef/zxaLVacfLkyQEfIgAAUDedTic6nU6cP38+HnnkkdizZ08Mb9++PR588ME4ffp0FEUx6GMEAABq7L777oudO3fG8Pj4eKxatcrdEAAAoO+Gh4dj7dq10R4dHY1OpzPo4wEAABpiZGQkhiMuvmfL27IAAIAsQgQAAEjXjghvzQKoou6h+P5/+Nfxr/7907HvQh8/p9/HdJ1OvPPU1+Of/7N/Ef/l5ffCNhnA4ExMTMSPf/zjq/57j6Io4uWXX47Dhw8v67HdEQGoqiKimJmN2QvdiKIbRdFa0ucU5w7GK392JFbueCi2rlrAY/T6mOYwOtaOiFaMjrXNTwAL8N3vfjciIp588smePeb09PTlCGm327Fjx44oiiJeeeWVOHz4cBw5ciTGxsbijjvuWNLjD0dEdLtdAz1A1bS3xK///X8af6OYjZOT78Z73QWM49d9TjdOv/GDeOZPj8Un7t0ZW25v5x/TdYpotd4PmKKIKAp3RQAWqJdr+vHx8di2bVvs3bs3Dh48GK1WKzqdzuU7IR/+8IdjfHw8LlxY2i3wy3dEABi0M/Hy7/27eGr/bfGLX/hy/MqmVrz7f78d//H5yShW7oy/+ZUn4p72dLzw29+KP5lYH4998ZNx/N/8t3hlZlv82m/89dg+/Hb80b/9g3hj8xPx2c0H4rkX9sa750di7bZfis/86i/GxrGImH01fucf/MH7n/PZuPvtP47/9dw7Mdvtxg9/61/GD1u3xC987u/Fk1uH8o4pIi5M/Fn88VM/iL1HZ+O2zQ/GznVj0Yozl5+Z4uzBePHZ5+LFtybiTGcs1my+P37plx+Lj915YXHH93e/GH9h3TLv+gA0xMzMTDzyyCMxPDwcr7/+ehw4cODy391///3x0EMPxdGjR5f8+N6aBVAaK+O+7ZvimXcOxOTEiehuHI3JyemIkZEYOjsVUye68aEVE3HkaBHttffHx8ZXxIvtiGiNxViriCLGYqwdMfP29+L3998eG+/9UKz9+b6Y+umfxFN3bIovPboh2u9/zKXPmS2GY8VoRHFuLO7e/onYsnpFbL6zdcWckHBMswfi+f/5vXh9uoiROzbG6rOvxvMvvRdFtCOiiKJ7NH70h78fzx64ECvW3RtbbjkeP3vnR/G/330v2l/8K4s7vvURRcd8B9TD008/fd0a/qmnnrr868985jPLevyiKGJqaip27twZExMTMT09HRERa9eujZ07d8bU1NSyHl+IAJRGJ27ZtDXWtn8WRw4eibMPrIhDh7px10MPx+ieF+Pw5LmYWXEoDs5E3LrtnlgzO/PBpxbF5XG86I7GA3/nN+NLvzAa7734rfhH/+nVOH70WJwvxmPFlWN90Y6ND//leOjNl+OdU7fFR3b/evzava04d+JYnLpQpB3T6OG9sfdEN1rrHo0vf+1z8ZHRk/GDb/7j+L03uhFRROfwq/HnB89H+86/FF/9zb8a9wydi1d/55/Et158M156/Xh89COLOL5OEToEyPD000/f9O+feOKJvh9DL9b3RVHEc889dzlCIiKOHTsWzz77bOzYseODt9IugbdmAZRI9457YuutES8cOhITUyvi0LlbYut922P0zRfi5YmpeHfsYLwXI7F9y3h04+DcD9LeFFvWTsehw91oja2J21oRJy9+q8U1ijh/cjrOFxd/PXv6aExNXT+h9PuYZs6ejjPdVoxu2Rqrjx2Mg92huHPL+mi/MRERETOnjseJbitGNm+MFZMH41DRjtX3bIyhH70RR49Px+xijs+mG1AjX/nKVy7/+pvf/GZERHz1q1+9/Gdvv/32sh6/KIr4yU9+EkeOHImIiB07dkS3243XXnvtqj9baoy4IwJQIsXsnbFly0i88NpUHNk/Gsdam+Ivrl0TY5uH4k8nD8X+kaNRtO+NrXcVVy+qr7j7EO2RaHc7UbQiurOXPqZ19cdc/pyr/vU5YqX/xxTtixNYq3shznaKaMdMXOhcmtSKiKH3v4G+eyHOdYsYik6cm7n4YyRb7eGlHx9AH10ZBHN56623lv1vzPUYvXjcS06cOBGTk5MREfHRj340HnjggYi42A5vvPFGTE5OxubNm2P16tVLenw/NQugTIpWbNi6Odo/mYh39o9FrHswxociRjbeFa19+2LfcDdaG7bFpuFuFLNXfNo1UVF0iijaccVPmyqu/5j3fxpVq92KKDoxM9ONopjjp2b1+ZhGVt8RK1tFnPz5vjh0YWNsGj4TB382Fd2LDxKj6zfEuvZrMXVgfxy+sDk2jZyLA+8cjk6rHeMb1karGws/vg9+DD5AX+3du3cg/26vf2rWpz/96di/f/9V3xPy0EMPRbfbjS1btsTo6GicO3duSY9/+Y7Ict7fBUCvdGN049ZY39oXRw6fjbGdd8XtRTdi/O649cwLcaSIWL1jc6wsImbnf7AFGIs1a2+NVnEqfvx//nNMrGrH2k98Ln7lwyNpx9Qa3xEfX/f/4rmje+IPf+tArB87E1NHZyPi/Xlp3Sdi930/jP/60w/+fmLydMTtO+OTH7stojOb/JwBlM+lOzC9DKBz587FypUrY9euXTExMXH5zycnJ+Phhx+OM2fOxOnTp5f8+JdDZGhoaL6PBSBBZ+WHYtuqiCPHW7Fx07rodouINXfH3e0iftq5Jbbdc0fMdjvX392Y4/fzf0wrNj361+KTh/97vPDzd2Mi7oqtq67/TwT7eUzd2XXxy1/6XJz+3T+KP584ERc2Px5ffnIyvv3tH0UUEd3zQ/Gxv/0b8bee+h/xvZf2xeEzo7Huvt3xq599Iu7tHIvTxSKOb5mvDUBZvfnmm3153FOnTsWpU6eu+/NL3yOyHK2vf/3rxac+9akYGRmZ/6MB6L/WrTG+dXOsGS7i7OQ78fPjMxHDq2Pz1g1xa6sTpw7ti8OnuxGt22LDtk2xun06jrx1KE4W1/y+G9G6ZTy2fGhNDL83GfsOHI/Zaz+nG9EauT3G714ft48NRXQuxPEjP4t33yvyjiki2ivWxIYN62LlaMTMmemYPD0ad991e5ybeDsOnuhEDK2INXfeGWtW3hIj7W7MnD0Vx6bejZPnu4s7PgBK4ZlnnrkYIo8++misWLFi0McDAAA0wDPPPHPxrVljY2O+WR0AAEgzHNHb764HAACYzxw/pxEAAKC/3BEBAADSDUdE/MPf/t6gjwMAAGiI3Rtb3poFAADkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECwJI8Ft+Px+L7gz4MACpKiACwaFcGiBgBYCmECAAAkE6IALAoc90BcVcEgMUSIgAs2M2CQ4wAsBhCBAAASCdEAFiQhdzxcFcEgIUSIgDMazGBIUYAWAghAgAApBMiANzUUu5wuCsCwHyECAA3tJygECMA3IwQAQAA0gkRAObUizsa7ooAcCNCBIDr9DIgxAgAcxEiAABAOiECwFX6cQfDXREAriVEALisn8EgRgC4khABAADSCREAIiLnjoW7IgBcIkQASA0EMQJAhBABAAAGQIgANNwg7lC4KwKAEAFosEEGgRgBaDYhAgAApBMiAA1VhjsSZTgGAAZDiAA0UJkCoEzHAkAeIQIAAKQTIgANU8Y7EGU8JgD6S4gANEiZF/xlPjYAek+IAAAA6YQIQENU4Y5DFY4RgN4QIgANUKUFfpWOFYClEyIAAEA6IQJQc1W8w1DFYwZgcYQIQI1VeUFf5WMHYH5CBAAASCdEAGqqDncU6vA1ADA3IQJQQ3VawNfpawHgA0IEAABIJ0QAaqaOdxDq+DUBNJ0QAaiROi/Y6/y1ATSREAEAANIJEYCaaMIdgyZ8jQBNIUQAaqBJC/Qmfa0AdSZEAACAdEIEoOKaeIegiV8zQN0IEYAKa/KCvMlfO0AdCBEAACCdEAGoKHcEPAcAVSZEACrIAvwDnguAahIiAABAOiECUDHuAFzPcwJQPUIEoEIsuG/McwNQLUIEAABIJ0QAKsKO//w8RwDVIUQAKsACe+E8VwDVIEQAAIB0QgSg5OzwL57nDKD8hAhAiVlQL53nDqDchAgAAJBOiACUlB395fMcApSXEAEoIQvo3vFcApSTEAEAANIJEYCSsYPfe55TgPIRIgAlYsHcP55bgHIRIgAAQDohAlASduz7z3MMUB5CBKAELJDzeK4BykGIAAAA6YQIwIDZoc/nOQcYPCECMEAWxIPjuQcYLCECAACkEyIAA2JHfvC8BgCDI0QABsACuDy8FgCDIUQAAIB0QgQgmR348vGaAOQTIgCJLHjLy2sDkEuIAAAA6YQIQBI77uXnNQLII0QAEljgVofXCiCHEAEAANIJEYA+s8NePV4zgP4TIgB9ZEFbXV47gP4SIgAAQDohAtAndtSrz2sI0D9CBKAPLGDrw2sJ0B9CBAAASCdEAHrMDnr9eE0Bek+IAPSQBWt9eW0BekuIAAAA6YQIQI/YMa8/rzFA7wgRgB6wQG0OrzVAbwgRAAAgnRABWCY75M3jNQdYPiECsAwWpM3ltQdYHiECAACkEyIAS2RHHOcAwNIJEYAlsADlEucCwNIIEQAAIJ0QAVgkO+BcyzkBsHhCBGARLDi5EecGwOIIEQAAIJ0QAVggO97MxzkCsHBCBGABLDBZKOcKwMIIEQAAIJ0QAZiHHW4WyzkDMD8hAnATFpQslXMH4OaECAAAkE6IANyAHW2WyzkEcGNCBGAOFpD0inMJYG5CBAAASCdEAK5hB5tec04BXE+IAFzBgpF+cW4BXE2IAAAA6YQIwPvsWNNvzjGADwgRgLBAJI9zDeAiIQIAAKQTIkDj2aEmm3MOQIgADWdByKA494CmEyIAAEA6IQI0lh1pBs05CDSZEAEayQKQsnAuAk0lRAAAgHRCBGgcO9CUjXMSaCIhAjSKBR9l5dwEmkaIAAAA6YQI0Bh2nCk75yjQJEIEaAQLPKrCuQo0hRABAADSCRGg9uwwUzXOWaAJhAhQaxZ0VJVzF6g7IQIAAKQTIkBt2VGm6pzDQJ0JEaCWLOCoC+cyUFdCBAAASCdEgNqxg0zdOKeBOhIiQK1YsFFXzm2gboQIAACQTogAtWHHmLpzjgN1IkSAWrBAoymc60BdCBEAACCdEAEqzw4xTeOcB+pAiACVZkFGUzn3gaoTIgAAQDohAlSWHWGazjUAVJkQASrJAgwuci0AVSVEAACAdEIEqBw7wHA11wRQRUIEqBQLLpibawOoGiECAACkEyJAZdjxhZtzjQBVIkSASrDAgoVxrQBVIUQAAIB0QgQoPTu8sDiuGaAKhAhQahZUsDSuHaDshAgAAJBOiAClZUcXlsc1BJSZEAFKyQIKesO1BJSVEAEAANIJEaB07OBCb7mmgDISIkCpWDBBf7i2gLIRIgAAQDohApSGHVvoL9cYUCZCBCgFCyTI4VoDykKIAAAA6YQIMHB2aCGXaw4oAyECDJQFEQyGaw8YNCECAACkEyLAwNiRhcFyDQKDJESAgbAAgnJwLQKDIkQAAIB0QgRIZwcWysU1CQyCEAFSWfBAObk2gWxCBAAASCdEgDR2XKHcXKNAJiECpLDAgWpwrQJZhAgAAJBOiAB9Z4cVqsU1C2QQIkBfWdBANbl2gX4TIgAAQDohAvSNHVWoNtcw0E9CBOgLCxioB9cy0C9CBAAASCdEgJ6zgwr14poG+kGIAD1lwQL15NoGek2IAAAA6YQI0DN2TKHeXONALwkRoCcsUKAZXOtArwgRAAAgnRABls0OKTSLax7oBSECLIsFCTSTax9YLiECAACkEyLAktkRhWYzBgDLIUSAJbEAASKMBcDSCREAACCdEAEWzQ4ocCVjArAUQgRYFAsOYC7GBmCxhAgAAJBOiAALZscTuBljBLAYQgRYEAsMYCGMFcBCCREAACCdEAHmZYcTWAxjBrAQQgS4KQsKYCmMHcB8hAgAAJBOiAA3ZEcTWA5jCHAzQgSYkwUE0AvGEuBGhAgAAJBOiADXsYMJ9JIxBZiLEAGuYsEA9IOxBbiWEAEAANIJEeAyO5ZAPxljgCsJESAiLBCAHMYa4BIhAgAApBMigB1KIJUxB4gQItB4FgTAIBh7ACECAACkEyLQYHYkgUEyBkGzCRFoKAsAoAyMRdBcQgQAAEgnRKCB7EACZWJMgmYSItAwJnygjIxN0DxCBAAASCdEoEHsOAJlZoyCZhEi0BAmeKAKjFXQHEIEAABIJ0SgAewwAlVizIJmECJQcyZ0oIqMXVB/QgQAAEgnRKDG7CgCVWYMg3oTIlBTJnCgDoxlUF9CBAAASCdEoIbsIAJ1YkyDehIiUDMmbKCOjG1QP0IEAABIJ0SgRuwYAnVmjIN6ESJQEyZooAmMdVAfQgQAAEgnRKAG7BACTWLMg3oQIlBxJmSgiYx9UH1CBAAASCdEoMLsCAJNZgyEahMiUFEmYABjIVSZEAEAANIJEaggO4AAHzAmQjUJEagYEy7A9YyNUD1CBAAASCdEoELs+AHcmDESqkWIQEWYYAHmZ6yE6hAiAABAOiECFWCHD2DhjJlQDUIESs6ECrB4xk4oPyECAACkEyJQYnb0AJbOGArlJkSgpEygAMtnLIXyEiIAAEA6IQIlZAcPoHeMqVBOQgRKxoQJ0HvGVigfIQIAAKQTIlAiduwA+scYC+UiRKAkTJAA/WeshfIQIgAAQDohAiVghw4gjzEXykGIwICZEAHyGXth8IQIAACQTojAANmRAxgcYzAMlhCBATEBAgyesRgGR4gAAADphAgMgB04gPIwJsNgCBFIZsIDKB9jM+QTIgAAQDohAonsuAGUlzEacgkRSGKCAyg/YzXkESIAAEA6IQIJ7LABVIcxG3IIEegzExpA9Ri7of+ECAAAkE6IQB/ZUQOoLmM49JcQgT4xgQFUn7Ec+keIAAAA6YQI9IEdNID6MKZDfwgR6DETFkD9GNuh94QIAACQTohAD9kxA6gvYzz0lhCBHjFBAdSfsR56R4gAAADphAj0gB0ygOYw5kNvCBFYJhMSQPMY+2H5hAgAAJBOiMAy2BEDaC5zACyPEIElMgEBYC6ApRMiAABAOiECS2AHDIBLzAmwNEIEFsmEA8C1zA2weEIEAABIJ0RgEex4AXAj5ghYHCECC2SCAWA+5gpYOCECAACkEyKwAHa4AFgocwYsjBCBeZhQAFgscwfMb3jQBwBl9/14bNCHAABQO+6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmGIyJ2b2wN+jgAAIAG+f/bSmo4C4fjXQAAAABJRU5ErkJggg=="},438:function(t,s,a){"use strict";a.r(s);var e=a(7),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"the-pipeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-pipeline"}},[t._v("#")]),t._v(" The Pipeline")]),t._v(" "),s("h2",{attrs:{id:"what-s-a-pipeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-s-a-pipeline"}},[t._v("#")]),t._v(" What's a pipeline?")]),t._v(" "),s("p",[t._v("If you're familiar with OpenGL, you may remember using shader programs. You can think of a pipeline as a more robust version of that. A pipeline describes all the actions the GPU will perform when acting on a set of data. In this section, we will be creating a "),s("code",[t._v("RenderPipeline")]),t._v(" specifically.")]),t._v(" "),s("h2",{attrs:{id:"wait-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wait-shaders"}},[t._v("#")]),t._v(" Wait, shaders?")]),t._v(" "),s("p",[t._v("Shaders are mini-programs that you send to the GPU to perform operations on your data. There are three main types of shaders: vertex, fragment, and compute. There are others, such as geometry shaders or tesselation shaders, but they're not supported by WebGL. They should be avoided in general ("),s("a",{attrs:{href:"https://community.khronos.org/t/does-the-use-of-geometric-shaders-significantly-reduce-performance/106326",target:"_blank",rel:"noopener noreferrer"}},[t._v("see discussions"),s("OutboundLink")],1),t._v("). For now, we're just going to use vertex and fragment shaders.")]),t._v(" "),s("h2",{attrs:{id:"vertex-fragment-what-are-those"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vertex-fragment-what-are-those"}},[t._v("#")]),t._v(" Vertex, fragment... what are those?")]),t._v(" "),s("p",[t._v("A vertex is a point in 3D space (can also be 2D). These vertices are then bundled in groups of 2s to form lines and/or 3s to form triangles.")]),t._v(" "),s("img",{attrs:{alt:"Vertices Graphic",src:a(341)}}),t._v(" "),s("p",[t._v("Most modern rendering uses triangles to make all shapes, from simple shapes (such as cubes) to complex ones (such as people). These triangles are stored as vertices, which are the points that make up the corners of the triangles.")]),t._v(" "),s("p",[t._v("We use a vertex shader to manipulate the vertices in order to transform the shape to look the way we want it.")]),t._v(" "),s("p",[t._v("The vertices are then converted into fragments. Every pixel in the result image gets at least one fragment. Each fragment has a color that will be copied to its corresponding pixel. The fragment shader decides what color the fragment will be.")]),t._v(" "),s("h2",{attrs:{id:"wgsl"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wgsl"}},[t._v("#")]),t._v(" WGSL")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://www.w3.org/TR/WGSL/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU Shading Language"),s("OutboundLink")],1),t._v(" (WGSL) is the shader language for WebGPU.\nWGSL's development focuses on getting it to easily convert into the shader language corresponding to the backend; for example, SPIR-V for Vulkan, MSL for Metal, HLSL for DX12, and GLSL for OpenGL.\nThe conversion is done internally, and we usually don't need to care about the details.\nIn the case of wgpu, it's done by the library called "),s("a",{attrs:{href:"https://github.com/gfx-rs/naga",target:"_blank",rel:"noopener noreferrer"}},[t._v("naga"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("Note that, at the time of writing this, some WebGPU implementations also support SPIR-V, but it's just a temporary measure during the transition period to WGSL and will be removed (If you are curious about the drama behind SPIR-V and WGSL, please refer to "),s("a",{attrs:{href:"https://kvark.github.io/spirv/2021/05/01/spirv-horrors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this blog post"),s("OutboundLink")],1),t._v(").")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you've gone through this tutorial before, you'll likely notice that I've switched from using GLSL to using WGSL. Given that GLSL support is a secondary concern and that WGSL is the first-class language of WGPU, I've elected to convert all the tutorials to use WGSL. Some showcase examples still use GLSL, but the main tutorial and all examples going forward will be using WGSL.")])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The WGSL spec and its inclusion in WGPU are still in development. If you run into trouble using it, you may want the folks at "),s("a",{attrs:{href:"https://app.element.io/#/room/#wgpu:matrix.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://app.element.io/#/room/#wgpu:matrix.org"),s("OutboundLink")],1),t._v(" to take a look at your code.")])]),t._v(" "),s("h2",{attrs:{id:"writing-the-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-the-shaders"}},[t._v("#")]),t._v(" Writing the shaders")]),t._v(" "),s("p",[t._v("In the same folder as "),s("code",[t._v("main.rs")]),t._v(", create a file "),s("code",[t._v("shader.wgsl")]),t._v(". Write the following code in "),s("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("vertex_index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("First, we declare "),s("code",[t._v("struct")]),t._v(" to store the output of our vertex shader. This currently consists of only one field, which is our vertex's "),s("code",[t._v("clip_position")]),t._v(". The "),s("code",[t._v("@builtin(position)")]),t._v(" bit tells WGPU that this is the value we want to use as the vertex's "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/Clip_coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("clip coordinates"),s("OutboundLink")],1),t._v(". This is analogous to GLSL's "),s("code",[t._v("gl_Position")]),t._v(" variable.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Vector types such as "),s("code",[t._v("vec4")]),t._v(" are generic. Currently, you must specify the type of value the vector will contain. Thus, a 3D vector using 32bit floats would be "),s("code",[t._v("vec3")]),t._v(".")])]),t._v(" "),s("p",[t._v("The next part of the shader code is the "),s("code",[t._v("vs_main")]),t._v(" function. We are using "),s("code",[t._v("@vertex")]),t._v(" to mark this function as a valid entry point for a vertex shader. We expect a "),s("code",[t._v("u32")]),t._v(" called "),s("code",[t._v("in_vertex_index")]),t._v(", which gets its value from "),s("code",[t._v("@builtin(vertex_index)")]),t._v(".")]),t._v(" "),s("p",[t._v("We then declare a variable called "),s("code",[t._v("out")]),t._v(" using our "),s("code",[t._v("VertexOutput")]),t._v(" struct. We create two other variables for the "),s("code",[t._v("x")]),t._v(" and "),s("code",[t._v("y")]),t._v(" of a triangle.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The "),s("code",[t._v("f32()")]),t._v(" and "),s("code",[t._v("i32()")]),t._v(" bits are examples of casts.")])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Variables defined with "),s("code",[t._v("var")]),t._v(" can be modified but must specify their type. Variables created with "),s("code",[t._v("let")]),t._v(" can have their types inferred, but their value cannot be changed during the shader.")])]),t._v(" "),s("p",[t._v("Now we can save our "),s("code",[t._v("clip_position")]),t._v(" to "),s("code",[t._v("out")]),t._v(". We then just return "),s("code",[t._v("out")]),t._v(", and we're done with the vertex shader!")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("We technically didn't need a struct for this example and could have just done something like the following:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("vertex_index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader code...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll be adding more fields to "),s("code",[t._v("VertexOutput")]),t._v(" later, so we might as well start using it now.")])]),t._v(" "),s("p",[t._v("Next up, the fragment shader. Still in "),s("code",[t._v("shader.wgsl")]),t._v(" add the following:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This sets the color of the current fragment to brown.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Notice that the entry point for the vertex shader was named "),s("code",[t._v("vs_main")]),t._v(" and that the entry point for the fragment shader is called "),s("code",[t._v("fs_main")]),t._v(". In earlier versions of wgpu, it was ok for both these functions to have the same name, but newer versions of the "),s("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#declaration-and-scope",target:"_blank",rel:"noopener noreferrer"}},[t._v("WGSL spec"),s("OutboundLink")],1),t._v(" require these names to be different. Therefore, the above-mentioned naming scheme (which is adopted from the "),s("code",[t._v("wgpu")]),t._v(" examples) is used throughout the tutorial.")])]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("@location(0)")]),t._v(" bit tells WGPU to store the "),s("code",[t._v("vec4")]),t._v(" value returned by this function in the first color target. We'll get into what this is later.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Something to note about "),s("code",[t._v("@builtin(position)")]),t._v(", in the fragment shader, this value is in "),s("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/#coordinate-systems",target:"_blank",rel:"noopener noreferrer"}},[t._v("framebuffer space"),s("OutboundLink")],1),t._v(". This means that if your window is 800x600, the x and y of "),s("code",[t._v("clip_position")]),t._v(" would be between 0-800 and 0-600, respectively, with the y = 0 being the top of the screen. This can be useful if you want to know the pixel coordinates of a given fragment, but if you want the position coordinates, you'll have to pass them in separately.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" vert_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("vertex_index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vert_pos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h2",{attrs:{id:"how-do-we-use-the-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-use-the-shaders"}},[t._v("#")]),t._v(" How do we use the shaders?")]),t._v(" "),s("p",[t._v("This is the part where we finally make the thing in the title: the pipeline. First, let's modify "),s("code",[t._v("State")]),t._v(" to include the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, let's move to the "),s("code",[t._v("new()")]),t._v(" method and start making the pipeline. We'll have to load in those shaders we made earlier, as the "),s("code",[t._v("render_pipeline")]),t._v(" requires those.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("You can also use "),s("code",[t._v("include_wgsl!")]),t._v(" macro as a small shortcut to create the "),s("code",[t._v("ShaderModuleDescriptor")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_wgsl!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("One more thing, we need to create a "),s("code",[t._v("PipelineLayout")]),t._v(". We'll get more into this after we cover "),s("code",[t._v("Buffer")]),t._v("s.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Finally, we have all we need to create the "),s("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),s("p",[t._v("Several things to note here:")]),t._v(" "),s("ol",[s("li",[t._v("Here you can specify which function inside the shader should be the "),s("code",[t._v("entry_point")]),t._v(". These are the functions we marked with "),s("code",[t._v("@vertex")]),t._v(" and "),s("code",[t._v("@fragment")])]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("buffers")]),t._v(" field tells "),s("code",[t._v("wgpu")]),t._v(" what type of vertices we want to pass to the vertex shader. We're specifying the vertices in the vertex shader itself, so we'll leave this empty. We'll put something there in the next tutorial.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("fragment")]),t._v(" is technically optional, so you have to wrap it in "),s("code",[t._v("Some()")]),t._v(". We need it if we want to store color data to the "),s("code",[t._v("surface")]),t._v(".")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("targets")]),t._v(" field tells "),s("code",[t._v("wgpu")]),t._v(" what color outputs it should set up. Currently, we only need one for the "),s("code",[t._v("surface")]),t._v(". We use the "),s("code",[t._v("surface")]),t._v("'s format so that copying to it is easy, and we specify that the blending should just replace old pixel data with new data. We also tell "),s("code",[t._v("wgpu")]),t._v(" to write to all colors: red, blue, green, and alpha. "),s("em",[t._v("We'll talk more about")]),t._v(" "),s("code",[t._v("color_state")]),t._v(" "),s("em",[t._v("when we talk about textures.")])])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" primitive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n strip_index_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n cull_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("primitive")]),t._v(" field describes how to interpret our vertices when converting them into triangles.")]),t._v(" "),s("ol",[s("li",[t._v("Using "),s("code",[t._v("PrimitiveTopology::TriangleList")]),t._v(" means that every three vertices will correspond to one triangle.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("front_face")]),t._v(" and "),s("code",[t._v("cull_mode")]),t._v(" fields tell "),s("code",[t._v("wgpu")]),t._v(" how to determine whether a given triangle is facing forward or not. "),s("code",[t._v("FrontFace::Ccw")]),t._v(" means that a triangle is facing forward if the vertices are arranged in a counter-clockwise direction. Triangles that are not considered facing forward are culled (not included in the render) as specified by "),s("code",[t._v("CullMode::Back")]),t._v(". We'll cover culling a bit more when we cover "),s("code",[t._v("Buffer")]),t._v("s.")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" depth_stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n multisample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n alpha_to_coverage_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multiview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The rest of the method is pretty simple:")]),t._v(" "),s("ol",[s("li",[t._v("We're not using a depth/stencil buffer currently, so we leave "),s("code",[t._v("depth_stencil")]),t._v(" as "),s("code",[t._v("None")]),t._v(". "),s("em",[t._v("This will change later")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("count")]),t._v(" determines how many samples the pipeline will use. Multisampling is a complex topic, so we won't get into it here.")]),t._v(" "),s("li",[s("code",[t._v("mask")]),t._v(" specifies which samples should be active. In this case, we are using all of them.")]),t._v(" "),s("li",[s("code",[t._v("alpha_to_coverage_enabled")]),t._v(" has to do with anti-aliasing. We're not covering anti-aliasing here, so we'll leave this as false now.")]),t._v(" "),s("li",[s("code",[t._v("multiview")]),t._v(" indicates how many array layers the render attachments can have. We won't be rendering to array textures, so we can set this to "),s("code",[t._v("None")]),t._v(".")])]),t._v(" "),s("p",[t._v("Now, all we have to do is add the "),s("code",[t._v("render_pipeline")]),t._v(" to "),s("code",[t._v("State")]),t._v(", and then we can use it!")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"using-a-pipeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-a-pipeline"}},[t._v("#")]),t._v(" Using a pipeline")]),t._v(" "),s("p",[t._v("If you run your program now, it'll take a little longer to start, but it will still show the blue screen we got in the last section. That's because we created the "),s("code",[t._v("render_pipeline")]),t._v(", but we still need to modify the code in "),s("code",[t._v("render()")]),t._v(" to actually use it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is what @location(0) in the fragment shader targets")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])])]),s("p",[t._v("We didn't change much, but let's talk about what we did change.")]),t._v(" "),s("ol",[s("li",[t._v("We renamed "),s("code",[t._v("_render_pass")]),t._v(" to "),s("code",[t._v("render_pass")]),t._v(" and made it mutable.")]),t._v(" "),s("li",[t._v("We set the pipeline on the "),s("code",[t._v("render_pass")]),t._v(" using the one we just created.")]),t._v(" "),s("li",[t._v("We tell "),s("code",[t._v("wgpu")]),t._v(" to draw "),s("em",[t._v("something")]),t._v(" with three vertices and one instance. This is where "),s("code",[t._v("@builtin(vertex_index)")]),t._v(" comes from.")])]),t._v(" "),s("p",[t._v("With all that you should be seeing a lovely brown triangle.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(342),alt:"Said lovely brown triangle"}})]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Create a second pipeline that uses the triangle's position data to create a color that it then sends to the fragment shader. Have the app swap between these when you press the spacebar. "),s("em",[t._v("Hint: you'll need to modify")]),t._v(" "),s("code",[t._v("VertexOutput")])]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial3_pipeline"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{328:function(t,s,a){t.exports=a.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},329:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyIAAAJzCAYAAADz6Ke4AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAByFSURBVHic7d1rkJ31fdjx3zl7EyAkIaEVSDJIsgdjiRiZCNIa5DQGh2majlt3WrtTe/rCY0/z2nnXvmtnept22pmOp3Y742ntJG2aJm16iwmMCWNS18gEEwwYBEK2bruLtLqiy+45T18ICV1W2ts5v/NcPp9XuuwePXvO8/z//+//Obtqbdy4sSiKIoaGhuLhhx+P7ds3x/r162N0dDQAAACWY2ZmJqanp+Oll16KPXv2RKfTiVarFcNFUcSqVavi85//fOzevTt2794dY2Njgz5eAACgJk6dOhV79uyJ559/Pr7zne/EyZMnY3hoaCi+8IUvxNe+9rWIiJieno5utzvgQwUAAOpiaGgoPv7xj8euXbsiIuIb3/hGDO/atSsef/zxaLVacfLkyQEfIgAAUDedTic6nU6cP38+HnnkkdizZ08Mb9++PR588ME4ffp0FEUx6GMEAABq7L777oudO3fG8Pj4eKxatcrdEAAAoO+Gh4dj7dq10R4dHY1OpzPo4wEAABpiZGQkhiMuvmfL27IAAIAsQgQAAEjXjghvzQKoou6h+P5/+Nfxr/7907HvQh8/p9/HdJ1OvPPU1+Of/7N/Ef/l5ffCNhnA4ExMTMSPf/zjq/57j6Io4uWXX47Dhw8v67HdEQGoqiKimJmN2QvdiKIbRdFa0ucU5w7GK392JFbueCi2rlrAY/T6mOYwOtaOiFaMjrXNTwAL8N3vfjciIp588smePeb09PTlCGm327Fjx44oiiJeeeWVOHz4cBw5ciTGxsbijjvuWNLjD0dEdLtdAz1A1bS3xK///X8af6OYjZOT78Z73QWM49d9TjdOv/GDeOZPj8Un7t0ZW25v5x/TdYpotd4PmKKIKAp3RQAWqJdr+vHx8di2bVvs3bs3Dh48GK1WKzqdzuU7IR/+8IdjfHw8LlxY2i3wy3dEABi0M/Hy7/27eGr/bfGLX/hy/MqmVrz7f78d//H5yShW7oy/+ZUn4p72dLzw29+KP5lYH4998ZNx/N/8t3hlZlv82m/89dg+/Hb80b/9g3hj8xPx2c0H4rkX9sa750di7bZfis/86i/GxrGImH01fucf/MH7n/PZuPvtP47/9dw7Mdvtxg9/61/GD1u3xC987u/Fk1uH8o4pIi5M/Fn88VM/iL1HZ+O2zQ/GznVj0Yozl5+Z4uzBePHZ5+LFtybiTGcs1my+P37plx+Lj915YXHH93e/GH9h3TLv+gA0xMzMTDzyyCMxPDwcr7/+ehw4cODy391///3x0EMPxdGjR5f8+N6aBVAaK+O+7ZvimXcOxOTEiehuHI3JyemIkZEYOjsVUye68aEVE3HkaBHttffHx8ZXxIvtiGiNxViriCLGYqwdMfP29+L3998eG+/9UKz9+b6Y+umfxFN3bIovPboh2u9/zKXPmS2GY8VoRHFuLO7e/onYsnpFbL6zdcWckHBMswfi+f/5vXh9uoiROzbG6rOvxvMvvRdFtCOiiKJ7NH70h78fzx64ECvW3RtbbjkeP3vnR/G/330v2l/8K4s7vvURRcd8B9TD008/fd0a/qmnnrr868985jPLevyiKGJqaip27twZExMTMT09HRERa9eujZ07d8bU1NSyHl+IAJRGJ27ZtDXWtn8WRw4eibMPrIhDh7px10MPx+ieF+Pw5LmYWXEoDs5E3LrtnlgzO/PBpxbF5XG86I7GA3/nN+NLvzAa7734rfhH/+nVOH70WJwvxmPFlWN90Y6ND//leOjNl+OdU7fFR3b/evzava04d+JYnLpQpB3T6OG9sfdEN1rrHo0vf+1z8ZHRk/GDb/7j+L03uhFRROfwq/HnB89H+86/FF/9zb8a9wydi1d/55/Et158M156/Xh89COLOL5OEToEyPD000/f9O+feOKJvh9DL9b3RVHEc889dzlCIiKOHTsWzz77bOzYseODt9IugbdmAZRI9457YuutES8cOhITUyvi0LlbYut922P0zRfi5YmpeHfsYLwXI7F9y3h04+DcD9LeFFvWTsehw91oja2J21oRJy9+q8U1ijh/cjrOFxd/PXv6aExNXT+h9PuYZs6ejjPdVoxu2Rqrjx2Mg92huHPL+mi/MRERETOnjseJbitGNm+MFZMH41DRjtX3bIyhH70RR49Px+xijs+mG1AjX/nKVy7/+pvf/GZERHz1q1+9/Gdvv/32sh6/KIr4yU9+EkeOHImIiB07dkS3243XXnvtqj9baoy4IwJQIsXsnbFly0i88NpUHNk/Gsdam+Ivrl0TY5uH4k8nD8X+kaNRtO+NrXcVVy+qr7j7EO2RaHc7UbQiurOXPqZ19cdc/pyr/vU5YqX/xxTtixNYq3shznaKaMdMXOhcmtSKiKH3v4G+eyHOdYsYik6cm7n4YyRb7eGlHx9AH10ZBHN56623lv1vzPUYvXjcS06cOBGTk5MREfHRj340HnjggYi42A5vvPFGTE5OxubNm2P16tVLenw/NQugTIpWbNi6Odo/mYh39o9FrHswxociRjbeFa19+2LfcDdaG7bFpuFuFLNXfNo1UVF0iijaccVPmyqu/5j3fxpVq92KKDoxM9ONopjjp2b1+ZhGVt8RK1tFnPz5vjh0YWNsGj4TB382Fd2LDxKj6zfEuvZrMXVgfxy+sDk2jZyLA+8cjk6rHeMb1karGws/vg9+DD5AX+3du3cg/26vf2rWpz/96di/f/9V3xPy0EMPRbfbjS1btsTo6GicO3duSY9/+Y7Ict7fBUCvdGN049ZY39oXRw6fjbGdd8XtRTdi/O649cwLcaSIWL1jc6wsImbnf7AFGIs1a2+NVnEqfvx//nNMrGrH2k98Ln7lwyNpx9Qa3xEfX/f/4rmje+IPf+tArB87E1NHZyPi/Xlp3Sdi930/jP/60w/+fmLydMTtO+OTH7stojOb/JwBlM+lOzC9DKBz587FypUrY9euXTExMXH5zycnJ+Phhx+OM2fOxOnTp5f8+JdDZGhoaL6PBSBBZ+WHYtuqiCPHW7Fx07rodouINXfH3e0iftq5Jbbdc0fMdjvX392Y4/fzf0wrNj361+KTh/97vPDzd2Mi7oqtq67/TwT7eUzd2XXxy1/6XJz+3T+KP584ERc2Px5ffnIyvv3tH0UUEd3zQ/Gxv/0b8bee+h/xvZf2xeEzo7Huvt3xq599Iu7tHIvTxSKOb5mvDUBZvfnmm3153FOnTsWpU6eu+/NL3yOyHK2vf/3rxac+9akYGRmZ/6MB6L/WrTG+dXOsGS7i7OQ78fPjMxHDq2Pz1g1xa6sTpw7ti8OnuxGt22LDtk2xun06jrx1KE4W1/y+G9G6ZTy2fGhNDL83GfsOHI/Zaz+nG9EauT3G714ft48NRXQuxPEjP4t33yvyjiki2ivWxIYN62LlaMTMmemYPD0ad991e5ybeDsOnuhEDK2INXfeGWtW3hIj7W7MnD0Vx6bejZPnu4s7PgBK4ZlnnrkYIo8++misWLFi0McDAAA0wDPPPHPxrVljY2O+WR0AAEgzHNHb764HAACYzxw/pxEAAKC/3BEBAADSDUdE/MPf/t6gjwMAAGiI3Rtb3poFAADkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECwJI8Ft+Px+L7gz4MACpKiACwaFcGiBgBYCmECAAAkE6IALAoc90BcVcEgMUSIgAs2M2CQ4wAsBhCBAAASCdEAFiQhdzxcFcEgIUSIgDMazGBIUYAWAghAgAApBMiANzUUu5wuCsCwHyECAA3tJygECMA3IwQAQAA0gkRAObUizsa7ooAcCNCBIDr9DIgxAgAcxEiAABAOiECwFX6cQfDXREAriVEALisn8EgRgC4khABAADSCREAIiLnjoW7IgBcIkQASA0EMQJAhBABAAAGQIgANNwg7lC4KwKAEAFosEEGgRgBaDYhAgAApBMiAA1VhjsSZTgGAAZDiAA0UJkCoEzHAkAeIQIAAKQTIgANU8Y7EGU8JgD6S4gANEiZF/xlPjYAek+IAAAA6YQIQENU4Y5DFY4RgN4QIgANUKUFfpWOFYClEyIAAEA6IQJQc1W8w1DFYwZgcYQIQI1VeUFf5WMHYH5CBAAASCdEAGqqDncU6vA1ADA3IQJQQ3VawNfpawHgA0IEAABIJ0QAaqaOdxDq+DUBNJ0QAaiROi/Y6/y1ATSREAEAANIJEYCaaMIdgyZ8jQBNIUQAaqBJC/Qmfa0AdSZEAACAdEIEoOKaeIegiV8zQN0IEYAKa/KCvMlfO0AdCBEAACCdEAGoKHcEPAcAVSZEACrIAvwDnguAahIiAABAOiECUDHuAFzPcwJQPUIEoEIsuG/McwNQLUIEAABIJ0QAKsKO//w8RwDVIUQAKsACe+E8VwDVIEQAAIB0QgSg5OzwL57nDKD8hAhAiVlQL53nDqDchAgAAJBOiACUlB395fMcApSXEAEoIQvo3vFcApSTEAEAANIJEYCSsYPfe55TgPIRIgAlYsHcP55bgHIRIgAAQDohAlASduz7z3MMUB5CBKAELJDzeK4BykGIAAAA6YQIwIDZoc/nOQcYPCECMEAWxIPjuQcYLCECAACkEyIAA2JHfvC8BgCDI0QABsACuDy8FgCDIUQAAIB0QgQgmR348vGaAOQTIgCJLHjLy2sDkEuIAAAA6YQIQBI77uXnNQLII0QAEljgVofXCiCHEAEAANIJEYA+s8NePV4zgP4TIgB9ZEFbXV47gP4SIgAAQDohAtAndtSrz2sI0D9CBKAPLGDrw2sJ0B9CBAAASCdEAHrMDnr9eE0Bek+IAPSQBWt9eW0BekuIAAAA6YQIQI/YMa8/rzFA7wgRgB6wQG0OrzVAbwgRAAAgnRABWCY75M3jNQdYPiECsAwWpM3ltQdYHiECAACkEyIAS2RHHOcAwNIJEYAlsADlEucCwNIIEQAAIJ0QAVgkO+BcyzkBsHhCBGARLDi5EecGwOIIEQAAIJ0QAVggO97MxzkCsHBCBGABLDBZKOcKwMIIEQAAIJ0QAZiHHW4WyzkDMD8hAnATFpQslXMH4OaECAAAkE6IANyAHW2WyzkEcGNCBGAOFpD0inMJYG5CBAAASCdEAK5hB5tec04BXE+IAFzBgpF+cW4BXE2IAAAA6YQIwPvsWNNvzjGADwgRgLBAJI9zDeAiIQIAAKQTIkDj2aEmm3MOQIgADWdByKA494CmEyIAAEA6IQI0lh1pBs05CDSZEAEayQKQsnAuAk0lRAAAgHRCBGgcO9CUjXMSaCIhAjSKBR9l5dwEmkaIAAAA6YQI0Bh2nCk75yjQJEIEaAQLPKrCuQo0hRABAADSCRGg9uwwUzXOWaAJhAhQaxZ0VJVzF6g7IQIAAKQTIkBt2VGm6pzDQJ0JEaCWLOCoC+cyUFdCBAAASCdEgNqxg0zdOKeBOhIiQK1YsFFXzm2gboQIAACQTogAtWHHmLpzjgN1IkSAWrBAoymc60BdCBEAACCdEAEqzw4xTeOcB+pAiACVZkFGUzn3gaoTIgAAQDohAlSWHWGazjUAVJkQASrJAgwuci0AVSVEAACAdEIEqBw7wHA11wRQRUIEqBQLLpibawOoGiECAACkEyJAZdjxhZtzjQBVIkSASrDAgoVxrQBVIUQAAIB0QgQoPTu8sDiuGaAKhAhQahZUsDSuHaDshAgAAJBOiAClZUcXlsc1BJSZEAFKyQIKesO1BJSVEAEAANIJEaB07OBCb7mmgDISIkCpWDBBf7i2gLIRIgAAQDohApSGHVvoL9cYUCZCBCgFCyTI4VoDykKIAAAA6YQIMHB2aCGXaw4oAyECDJQFEQyGaw8YNCECAACkEyLAwNiRhcFyDQKDJESAgbAAgnJwLQKDIkQAAIB0QgRIZwcWysU1CQyCEAFSWfBAObk2gWxCBAAASCdEgDR2XKHcXKNAJiECpLDAgWpwrQJZhAgAAJBOiAB9Z4cVqsU1C2QQIkBfWdBANbl2gX4TIgAAQDohAvSNHVWoNtcw0E9CBOgLCxioB9cy0C9CBAAASCdEgJ6zgwr14poG+kGIAD1lwQL15NoGek2IAAAA6YQI0DN2TKHeXONALwkRoCcsUKAZXOtArwgRAAAgnRABls0OKTSLax7oBSECLIsFCTSTax9YLiECAACkEyLAktkRhWYzBgDLIUSAJbEAASKMBcDSCREAACCdEAEWzQ4ocCVjArAUQgRYFAsOYC7GBmCxhAgAAJBOiAALZscTuBljBLAYQgRYEAsMYCGMFcBCCREAACCdEAHmZYcTWAxjBrAQQgS4KQsKYCmMHcB8hAgAAJBOiAA3ZEcTWA5jCHAzQgSYkwUE0AvGEuBGhAgAAJBOiADXsYMJ9JIxBZiLEAGuYsEA9IOxBbiWEAEAANIJEeAyO5ZAPxljgCsJESAiLBCAHMYa4BIhAgAApBMigB1KIJUxB4gQItB4FgTAIBh7ACECAACkEyLQYHYkgUEyBkGzCRFoKAsAoAyMRdBcQgQAAEgnRKCB7EACZWJMgmYSItAwJnygjIxN0DxCBAAASCdEoEHsOAJlZoyCZhEi0BAmeKAKjFXQHEIEAABIJ0SgAewwAlVizIJmECJQcyZ0oIqMXVB/QgQAAEgnRKDG7CgCVWYMg3oTIlBTJnCgDoxlUF9CBAAASCdEoIbsIAJ1YkyDehIiUDMmbKCOjG1QP0IEAABIJ0SgRuwYAnVmjIN6ESJQEyZooAmMdVAfQgQAAEgnRKAG7BACTWLMg3oQIlBxJmSgiYx9UH1CBAAASCdEoMLsCAJNZgyEahMiUFEmYABjIVSZEAEAANIJEaggO4AAHzAmQjUJEagYEy7A9YyNUD1CBAAASCdEoELs+AHcmDESqkWIQEWYYAHmZ6yE6hAiAABAOiECFWCHD2DhjJlQDUIESs6ECrB4xk4oPyECAACkEyJQYnb0AJbOGArlJkSgpEygAMtnLIXyEiIAAEA6IQIlZAcPoHeMqVBOQgRKxoQJ0HvGVigfIQIAAKQTIlAiduwA+scYC+UiRKAkTJAA/WeshfIQIgAAQDohAiVghw4gjzEXykGIwICZEAHyGXth8IQIAACQTojAANmRAxgcYzAMlhCBATEBAgyesRgGR4gAAADphAgMgB04gPIwJsNgCBFIZsIDKB9jM+QTIgAAQDohAonsuAGUlzEacgkRSGKCAyg/YzXkESIAAEA6IQIJ7LABVIcxG3IIEegzExpA9Ri7of+ECAAAkE6IQB/ZUQOoLmM49JcQgT4xgQFUn7Ec+keIAAAA6YQI9IEdNID6MKZDfwgR6DETFkD9GNuh94QIAACQTohAD9kxA6gvYzz0lhCBHjFBAdSfsR56R4gAAADphAj0gB0ygOYw5kNvCBFYJhMSQPMY+2H5hAgAAJBOiMAy2BEDaC5zACyPEIElMgEBYC6ApRMiAABAOiECS2AHDIBLzAmwNEIEFsmEA8C1zA2weEIEAABIJ0RgEex4AXAj5ghYHCECC2SCAWA+5gpYOCECAACkEyKwAHa4AFgocwYsjBCBeZhQAFgscwfMb3jQBwBl9/14bNCHAABQO+6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmGIyJ2b2wN+jgAAIAG+f/bSmo4C4fjXQAAAABJRU5ErkJggg=="},433:function(t,s,a){"use strict";a.r(s);var e=a(7),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"the-pipeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-pipeline"}},[t._v("#")]),t._v(" The Pipeline")]),t._v(" "),s("h2",{attrs:{id:"what-s-a-pipeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-s-a-pipeline"}},[t._v("#")]),t._v(" What's a pipeline?")]),t._v(" "),s("p",[t._v("If you're familiar with OpenGL, you may remember using shader programs. You can think of a pipeline as a more robust version of that. A pipeline describes all the actions the GPU will perform when acting on a set of data. In this section, we will be creating a "),s("code",[t._v("RenderPipeline")]),t._v(" specifically.")]),t._v(" "),s("h2",{attrs:{id:"wait-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wait-shaders"}},[t._v("#")]),t._v(" Wait, shaders?")]),t._v(" "),s("p",[t._v("Shaders are mini-programs that you send to the GPU to perform operations on your data. There are three main types of shaders: vertex, fragment, and compute. There are others, such as geometry shaders or tesselation shaders, but they're not supported by WebGL. They should be avoided in general ("),s("a",{attrs:{href:"https://community.khronos.org/t/does-the-use-of-geometric-shaders-significantly-reduce-performance/106326",target:"_blank",rel:"noopener noreferrer"}},[t._v("see discussions"),s("OutboundLink")],1),t._v("). For now, we're just going to use vertex and fragment shaders.")]),t._v(" "),s("h2",{attrs:{id:"vertex-fragment-what-are-those"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vertex-fragment-what-are-those"}},[t._v("#")]),t._v(" Vertex, fragment... what are those?")]),t._v(" "),s("p",[t._v("A vertex is a point in 3D space (can also be 2D). These vertices are then bundled in groups of 2s to form lines and/or 3s to form triangles.")]),t._v(" "),s("img",{attrs:{alt:"Vertices Graphic",src:a(328)}}),t._v(" "),s("p",[t._v("Most modern rendering uses triangles to make all shapes, from simple shapes (such as cubes) to complex ones (such as people). These triangles are stored as vertices, which are the points that make up the corners of the triangles.")]),t._v(" "),s("p",[t._v("We use a vertex shader to manipulate the vertices in order to transform the shape to look the way we want it.")]),t._v(" "),s("p",[t._v("The vertices are then converted into fragments. Every pixel in the result image gets at least one fragment. Each fragment has a color that will be copied to its corresponding pixel. The fragment shader decides what color the fragment will be.")]),t._v(" "),s("h2",{attrs:{id:"wgsl"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wgsl"}},[t._v("#")]),t._v(" WGSL")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://www.w3.org/TR/WGSL/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU Shading Language"),s("OutboundLink")],1),t._v(" (WGSL) is the shader language for WebGPU.\nWGSL's development focuses on getting it to easily convert into the shader language corresponding to the backend; for example, SPIR-V for Vulkan, MSL for Metal, HLSL for DX12, and GLSL for OpenGL.\nThe conversion is done internally, and we usually don't need to care about the details.\nIn the case of wgpu, it's done by the library called "),s("a",{attrs:{href:"https://github.com/gfx-rs/naga",target:"_blank",rel:"noopener noreferrer"}},[t._v("naga"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("Note that, at the time of writing this, some WebGPU implementations also support SPIR-V, but it's just a temporary measure during the transition period to WGSL and will be removed (If you are curious about the drama behind SPIR-V and WGSL, please refer to "),s("a",{attrs:{href:"https://kvark.github.io/spirv/2021/05/01/spirv-horrors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this blog post"),s("OutboundLink")],1),t._v(").")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you've gone through this tutorial before, you'll likely notice that I've switched from using GLSL to using WGSL. Given that GLSL support is a secondary concern and that WGSL is the first-class language of WGPU, I've elected to convert all the tutorials to use WGSL. Some showcase examples still use GLSL, but the main tutorial and all examples going forward will be using WGSL.")])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The WGSL spec and its inclusion in WGPU are still in development. If you run into trouble using it, you may want the folks at "),s("a",{attrs:{href:"https://app.element.io/#/room/#wgpu:matrix.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://app.element.io/#/room/#wgpu:matrix.org"),s("OutboundLink")],1),t._v(" to take a look at your code.")])]),t._v(" "),s("h2",{attrs:{id:"writing-the-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-the-shaders"}},[t._v("#")]),t._v(" Writing the shaders")]),t._v(" "),s("p",[t._v("In the same folder as "),s("code",[t._v("main.rs")]),t._v(", create a file "),s("code",[t._v("shader.wgsl")]),t._v(". Write the following code in "),s("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("vertex_index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("First, we declare "),s("code",[t._v("struct")]),t._v(" to store the output of our vertex shader. This currently consists of only one field, which is our vertex's "),s("code",[t._v("clip_position")]),t._v(". The "),s("code",[t._v("@builtin(position)")]),t._v(" bit tells WGPU that this is the value we want to use as the vertex's "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/Clip_coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("clip coordinates"),s("OutboundLink")],1),t._v(". This is analogous to GLSL's "),s("code",[t._v("gl_Position")]),t._v(" variable.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Vector types such as "),s("code",[t._v("vec4")]),t._v(" are generic. Currently, you must specify the type of value the vector will contain. Thus, a 3D vector using 32bit floats would be "),s("code",[t._v("vec3")]),t._v(".")])]),t._v(" "),s("p",[t._v("The next part of the shader code is the "),s("code",[t._v("vs_main")]),t._v(" function. We are using "),s("code",[t._v("@vertex")]),t._v(" to mark this function as a valid entry point for a vertex shader. We expect a "),s("code",[t._v("u32")]),t._v(" called "),s("code",[t._v("in_vertex_index")]),t._v(", which gets its value from "),s("code",[t._v("@builtin(vertex_index)")]),t._v(".")]),t._v(" "),s("p",[t._v("We then declare a variable called "),s("code",[t._v("out")]),t._v(" using our "),s("code",[t._v("VertexOutput")]),t._v(" struct. We create two other variables for the "),s("code",[t._v("x")]),t._v(" and "),s("code",[t._v("y")]),t._v(" of a triangle.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("The "),s("code",[t._v("f32()")]),t._v(" and "),s("code",[t._v("i32()")]),t._v(" bits are examples of casts.")])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Variables defined with "),s("code",[t._v("var")]),t._v(" can be modified but must specify their type. Variables created with "),s("code",[t._v("let")]),t._v(" can have their types inferred, but their value cannot be changed during the shader.")])]),t._v(" "),s("p",[t._v("Now we can save our "),s("code",[t._v("clip_position")]),t._v(" to "),s("code",[t._v("out")]),t._v(". We then just return "),s("code",[t._v("out")]),t._v(", and we're done with the vertex shader!")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("We technically didn't need a struct for this example and could have just done something like the following:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("vertex_index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader code...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll be adding more fields to "),s("code",[t._v("VertexOutput")]),t._v(" later, so we might as well start using it now.")])]),t._v(" "),s("p",[t._v("Next up, the fragment shader. Still in "),s("code",[t._v("shader.wgsl")]),t._v(" add the following:")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("fragment")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("fs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This sets the color of the current fragment to brown.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Notice that the entry point for the vertex shader was named "),s("code",[t._v("vs_main")]),t._v(" and that the entry point for the fragment shader is called "),s("code",[t._v("fs_main")]),t._v(". In earlier versions of wgpu, it was ok for both these functions to have the same name, but newer versions of the "),s("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#declaration-and-scope",target:"_blank",rel:"noopener noreferrer"}},[t._v("WGSL spec"),s("OutboundLink")],1),t._v(" require these names to be different. Therefore, the above-mentioned naming scheme (which is adopted from the "),s("code",[t._v("wgpu")]),t._v(" examples) is used throughout the tutorial.")])]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("@location(0)")]),t._v(" bit tells WGPU to store the "),s("code",[t._v("vec4")]),t._v(" value returned by this function in the first color target. We'll get into what this is later.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("Something to note about "),s("code",[t._v("@builtin(position)")]),t._v(", in the fragment shader, this value is in "),s("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/#coordinate-systems",target:"_blank",rel:"noopener noreferrer"}},[t._v("framebuffer space"),s("OutboundLink")],1),t._v(". This means that if your window is 800x600, the x and y of "),s("code",[t._v("clip_position")]),t._v(" would be between 0-800 and 0-600, respectively, with the y = 0 being the top of the screen. This can be useful if you want to know the pixel coordinates of a given fragment, but if you want the position coordinates, you'll have to pass them in separately.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" vert_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("vertex_index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("in_vertex_index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vert_pos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xyz"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h2",{attrs:{id:"how-do-we-use-the-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-use-the-shaders"}},[t._v("#")]),t._v(" How do we use the shaders?")]),t._v(" "),s("p",[t._v("This is the part where we finally make the thing in the title: the pipeline. First, let's modify "),s("code",[t._v("State")]),t._v(" to include the following.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now, let's move to the "),s("code",[t._v("new()")]),t._v(" method and start making the pipeline. We'll have to load in those shaders we made earlier, as the "),s("code",[t._v("render_pipeline")]),t._v(" requires those.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("You can also use "),s("code",[t._v("include_wgsl!")]),t._v(" macro as a small shortcut to create the "),s("code",[t._v("ShaderModuleDescriptor")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_wgsl!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("One more thing, we need to create a "),s("code",[t._v("PipelineLayout")]),t._v(". We'll get more into this after we cover "),s("code",[t._v("Buffer")]),t._v("s.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Finally, we have all we need to create the "),s("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),s("p",[t._v("Several things to note here:")]),t._v(" "),s("ol",[s("li",[t._v("Here you can specify which function inside the shader should be the "),s("code",[t._v("entry_point")]),t._v(". These are the functions we marked with "),s("code",[t._v("@vertex")]),t._v(" and "),s("code",[t._v("@fragment")])]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("buffers")]),t._v(" field tells "),s("code",[t._v("wgpu")]),t._v(" what type of vertices we want to pass to the vertex shader. We're specifying the vertices in the vertex shader itself, so we'll leave this empty. We'll put something there in the next tutorial.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("fragment")]),t._v(" is technically optional, so you have to wrap it in "),s("code",[t._v("Some()")]),t._v(". We need it if we want to store color data to the "),s("code",[t._v("surface")]),t._v(".")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("targets")]),t._v(" field tells "),s("code",[t._v("wgpu")]),t._v(" what color outputs it should set up. Currently, we only need one for the "),s("code",[t._v("surface")]),t._v(". We use the "),s("code",[t._v("surface")]),t._v("'s format so that copying to it is easy, and we specify that the blending should just replace old pixel data with new data. We also tell "),s("code",[t._v("wgpu")]),t._v(" to write to all colors: red, blue, green, and alpha. "),s("em",[t._v("We'll talk more about")]),t._v(" "),s("code",[t._v("color_state")]),t._v(" "),s("em",[t._v("when we talk about textures.")])])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" primitive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n strip_index_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n cull_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("primitive")]),t._v(" field describes how to interpret our vertices when converting them into triangles.")]),t._v(" "),s("ol",[s("li",[t._v("Using "),s("code",[t._v("PrimitiveTopology::TriangleList")]),t._v(" means that every three vertices will correspond to one triangle.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("front_face")]),t._v(" and "),s("code",[t._v("cull_mode")]),t._v(" fields tell "),s("code",[t._v("wgpu")]),t._v(" how to determine whether a given triangle is facing forward or not. "),s("code",[t._v("FrontFace::Ccw")]),t._v(" means that a triangle is facing forward if the vertices are arranged in a counter-clockwise direction. Triangles that are not considered facing forward are culled (not included in the render) as specified by "),s("code",[t._v("CullMode::Back")]),t._v(". We'll cover culling a bit more when we cover "),s("code",[t._v("Buffer")]),t._v("s.")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v(" depth_stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n multisample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n alpha_to_coverage_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multiview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The rest of the method is pretty simple:")]),t._v(" "),s("ol",[s("li",[t._v("We're not using a depth/stencil buffer currently, so we leave "),s("code",[t._v("depth_stencil")]),t._v(" as "),s("code",[t._v("None")]),t._v(". "),s("em",[t._v("This will change later")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("count")]),t._v(" determines how many samples the pipeline will use. Multisampling is a complex topic, so we won't get into it here.")]),t._v(" "),s("li",[s("code",[t._v("mask")]),t._v(" specifies which samples should be active. In this case, we are using all of them.")]),t._v(" "),s("li",[s("code",[t._v("alpha_to_coverage_enabled")]),t._v(" has to do with anti-aliasing. We're not covering anti-aliasing here, so we'll leave this as false now.")]),t._v(" "),s("li",[s("code",[t._v("multiview")]),t._v(" indicates how many array layers the render attachments can have. We won't be rendering to array textures, so we can set this to "),s("code",[t._v("None")]),t._v(".")])]),t._v(" "),s("p",[t._v("Now, all we have to do is add the "),s("code",[t._v("render_pipeline")]),t._v(" to "),s("code",[t._v("State")]),t._v(", and then we can use it!")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"using-a-pipeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-a-pipeline"}},[t._v("#")]),t._v(" Using a pipeline")]),t._v(" "),s("p",[t._v("If you run your program now, it'll take a little longer to start, but it will still show the blue screen we got in the last section. That's because we created the "),s("code",[t._v("render_pipeline")]),t._v(", but we still need to modify the code in "),s("code",[t._v("render()")]),t._v(" to actually use it.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is what @location(0) in the fragment shader targets")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])])]),s("p",[t._v("We didn't change much, but let's talk about what we did change.")]),t._v(" "),s("ol",[s("li",[t._v("We renamed "),s("code",[t._v("_render_pass")]),t._v(" to "),s("code",[t._v("render_pass")]),t._v(" and made it mutable.")]),t._v(" "),s("li",[t._v("We set the pipeline on the "),s("code",[t._v("render_pass")]),t._v(" using the one we just created.")]),t._v(" "),s("li",[t._v("We tell "),s("code",[t._v("wgpu")]),t._v(" to draw "),s("em",[t._v("something")]),t._v(" with three vertices and one instance. This is where "),s("code",[t._v("@builtin(vertex_index)")]),t._v(" comes from.")])]),t._v(" "),s("p",[t._v("With all that you should be seeing a lovely brown triangle.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(329),alt:"Said lovely brown triangle"}})]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Create a second pipeline that uses the triangle's position data to create a color that it then sends to the fragment shader. Have the app swap between these when you press the spacebar. "),s("em",[t._v("Hint: you'll need to modify")]),t._v(" "),s("code",[t._v("VertexOutput")])]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial3_pipeline"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/45.2ea5b108.js b/assets/js/45.81bcfe17.js similarity index 97% rename from assets/js/45.2ea5b108.js rename to assets/js/45.81bcfe17.js index 406c7551..033f3f76 100644 --- a/assets/js/45.2ea5b108.js +++ b/assets/js/45.81bcfe17.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return l})),n.d(e,"f",(function(){return a})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return f})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(93);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,l=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function a(t){return l.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function f(t){if(a(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return s.test(i)?t:i+".html"+n}function p(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function h(t,e,n){if(a(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=l.sidebar||s.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},286:function(t,e,n){"use strict";n.r(e);var r=n(261),i={props:{item:{required:!0}},computed:{link(){return Object(r.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:r.f,isMailto:r.g,isTel:r.h}},s=n(7),l=Object(s.a)(i,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{261:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return l})),n.d(e,"f",(function(){return a})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return f})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(92);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,l=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function a(t){return l.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function f(t){if(a(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return s.test(i)?t:i+".html"+n}function p(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function h(t,e,n){if(a(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const o=l.sidebar||s.sidebar;if(o){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return n?n.map(e=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(e,i,t)):[]}return[]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},286:function(t,e,n){"use strict";n.r(e);var r=n(261),i={props:{item:{required:!0}},computed:{link(){return Object(r.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link}},methods:{isExternal:r.f,isMailto:r.g,isTel:r.h}},s=n(7),l=Object(s.a)(i,(function(){var t=this,e=t._self._c;return t.isExternal(t.link)?e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.isMailto(t.link)||t.isTel(t.link)?null:"_blank",rel:t.isMailto(t.link)||t.isTel(t.link)?null:"noopener noreferrer"}},[t._v("\n "+t._s(t.item.text)+"\n "),e("OutboundLink")],1):e("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null);e.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/46.93a3bfa3.js b/assets/js/46.fbe2131f.js similarity index 99% rename from assets/js/46.93a3bfa3.js rename to assets/js/46.fbe2131f.js index b35ddf2c..15533345 100644 --- a/assets/js/46.93a3bfa3.js +++ b/assets/js/46.fbe2131f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{339:function(t,s,a){t.exports=a.p+"assets/img/static-tree.17986854.png"},436:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"uniform-buffers-and-a-3d-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-a-3d-camera"}},[t._v("#")]),t._v(" Uniform buffers and a 3d camera")]),t._v(" "),s("p",[t._v("While all of our previous work has seemed to be in 2D, we've actually been working in 3d the entire time! That's part of the reason why our "),s("code",[t._v("Vertex")]),t._v(" structure has "),s("code",[t._v("position")]),t._v(" as an array of 3 floats instead of just 2. We can't really see the 3d-ness of our scene because we're viewing things head-on. We're going to change our point of view by creating a "),s("code",[t._v("Camera")]),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"a-perspective-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-perspective-camera"}},[t._v("#")]),t._v(" A perspective camera")]),t._v(" "),s("p",[t._v("This tutorial is more about learning to use wgpu and less about linear algebra, so I'm going to gloss over a lot of the math involved. There's plenty of reading material online if you're interested in what's going on under the hood. We're going to use the "),s("a",{attrs:{href:"https://docs.rs/cgmath",target:"_blank",rel:"noopener noreferrer"}},[t._v("cgmath"),s("OutboundLink")],1),t._v(" to handle all the math for us. Add the following to your "),s("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n")])])]),s("p",[t._v("Now that we have a math library let's put it to use! Create a "),s("code",[t._v("Camera")]),t._v(" struct above the "),s("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("build_view_projection_matrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_at_rh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fovy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("znear"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zfar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("build_view_projection_matrix")]),t._v(" is where the magic happens.")]),t._v(" "),s("ol",[s("li",[t._v("The "),s("code",[t._v("view")]),t._v(" matrix moves the world to be at the position and rotation of the camera. It's essentially an inverse of whatever the transform matrix of the camera would be.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("proj")]),t._v(" matrix warps the scene to give the effect of depth. Without this, objects up close would be the same size as objects far away.")]),t._v(" "),s("li",[t._v("The coordinate system in Wgpu is based on DirectX and Metal's coordinate systems. That means that in "),s("a",{attrs:{href:"https://github.com/gfx-rs/gfx/tree/master/src/backend/dx12#normalized-coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("normalized device coordinates"),s("OutboundLink")],1),t._v(", the x-axis and y-axis are in the range of -1.0 to +1.0, and the z-axis is 0.0 to +1.0. The "),s("code",[t._v("cgmath")]),t._v(" crate (as well as most game math crates) is built for OpenGL's coordinate system. This matrix will scale and translate our scene from OpenGL's coordinate system to WGPU's. We'll define it as follows.")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[t._v("Note: We don't explicitly "),s("strong",[t._v("need")]),t._v(" the "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(", but models centered on (0, 0, 0) will be halfway inside the clipping area. This is only an issue if you aren't using a camera matrix.")])]),t._v(" "),s("p",[t._v("Now let's add a "),s("code",[t._v("camera")]),t._v(" field to "),s("code",[t._v("State")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let diffuse_bind_group ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// position the camera 1 unit up and 2 units back")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// +z is out of the screen")]),t._v("\n eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// have it look at the origin")]),t._v("\n target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// which way is "up"')]),t._v("\n up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our camera, and it can make us a view projection matrix, we need somewhere to put it. We also need some way of getting it into our shaders.")]),t._v(" "),s("h2",{attrs:{id:"the-uniform-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-uniform-buffer"}},[t._v("#")]),t._v(" The uniform buffer")]),t._v(" "),s("p",[t._v("Up to this point, we've used "),s("code",[t._v("Buffer")]),t._v("s to store our vertex and index data, and even to load our textures. We are going to use them again to create what's known as a uniform buffer. A uniform is a blob of data available to every invocation of a set of shaders. Technically, we've already used uniforms for our texture and sampler. We're going to use them again to store our view projection matrix. To start, let's create a struct to hold our uniform.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need this for Rust to store our data correctly for the shaders")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is so we can store this in a buffer")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can't use cgmath with bytemuck directly, so we'll have")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to convert the Matrix4 into a 4x4 f32 array")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SquareMatrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our data structured, let's make our "),s("code",[t._v("camera_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// in new() after creating `camera`")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" camera_uniform "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncamera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Camera Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("UNIFORM")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"uniform-buffers-and-bind-groups"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-bind-groups"}},[t._v("#")]),t._v(" Uniform buffers and bind groups")]),t._v(" "),s("p",[t._v("Cool! Now that we have a uniform buffer, what do we do with it? The answer is we create a bind group for it. First, we have to create the bind group layout.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferBindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n has_dynamic_offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_binding_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Some things to note:")]),t._v(" "),s("ol",[s("li",[t._v("We set "),s("code",[t._v("visibility")]),t._v(" to "),s("code",[t._v("ShaderStages::VERTEX")]),t._v(" as we only really need camera information in the vertex shader, as\nthat's what we'll use to manipulate our vertices.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("has_dynamic_offset")]),t._v(" means that the location of the data in the buffer may change. This will be the case if you\nstore multiple data sets that vary in size in a single buffer. If you set this to true, you'll have to supply the\noffsets later.")]),t._v(" "),s("li",[s("code",[t._v("min_binding_size")]),t._v(" specifies the smallest size the buffer can be. You don't have to specify this, so we\nleave it "),s("code",[t._v("None")]),t._v(". If you want to know more, you can check "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.BindingType.html#variant.Buffer.field.min_binding_size",target:"_blank",rel:"noopener noreferrer"}},[t._v("the docs"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("p",[t._v("Now, we can create the actual bind group.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_entire_binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Like with our texture, we need to register our "),s("code",[t._v("camera_bind_group_layout")]),t._v(" with the render pipeline.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we need to add "),s("code",[t._v("camera_buffer")]),t._v(" and "),s("code",[t._v("camera_bind_group")]),t._v(" to "),s("code",[t._v("State")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The final thing we need to do before we get into shaders is use the bind group in "),s("code",[t._v("render()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"using-the-uniform-in-the-vertex-shader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-the-uniform-in-the-vertex-shader"}},[t._v("#")]),t._v(" Using the uniform in the vertex shader")]),t._v(" "),s("p",[t._v("Modify the vertex shader to include the following.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",[s("li",[t._v("Because we've created a new bind group, we need to specify which one we're using in the shader. The number is determined by our "),s("code",[t._v("render_pipeline_layout")]),t._v(". The "),s("code",[t._v("texture_bind_group_layout")]),t._v(" is listed first, thus it's "),s("code",[t._v("group(0)")]),t._v(", and "),s("code",[t._v("camera_bind_group")]),t._v(" is second, so it's "),s("code",[t._v("group(1)")]),t._v(".")]),t._v(" "),s("li",[t._v("Multiplication order is important when it comes to matrices. The vector goes on the right, and the matrices go on the left in order of importance.")])]),t._v(" "),s("h2",{attrs:{id:"a-controller-for-our-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-controller-for-our-camera"}},[t._v("#")]),t._v(" A controller for our camera")]),t._v(" "),s("p",[t._v("If you run the code right now, you should get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(339),alt:"./static-tree.png"}})]),t._v(" "),s("p",[t._v("The shape's less stretched now, but it's still pretty static. You can experiment with moving the camera position around, but most cameras in games move around. Since this tutorial is about using wgpu and not how to process user input, I'm just going to post the "),s("code",[t._v("CameraController")]),t._v(" code below.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_events")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" is_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" keycode "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InnerSpace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_norm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prevents glitching when the camera gets too close to the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// center of the scene.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" forward_mag "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward_norm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-=")]),t._v(" forward_norm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward_norm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cross")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Redo radius calc in case the forward/backward is pressed.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rescale the distance between the target and the eye so ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// that it doesn't change. The eye, therefore, still ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lies on the circle made by the target and eye.")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This code is not perfect. The camera slowly moves back when you rotate it. It works for our purposes, though. Feel free to improve it!")]),t._v(" "),s("p",[t._v("We still need to plug this into our existing code to make it do anything. Add the controller to "),s("code",[t._v("State")]),t._v(" and create it in "),s("code",[t._v("new()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We're finally going to add some code to "),s("code",[t._v("input()")]),t._v(" (assuming you haven't already)!")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_events")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Up to this point, the camera controller isn't actually doing anything. The values in our uniform buffer need to be updated. There are a few main methods to do that.")]),t._v(" "),s("ol",[s("li",[t._v("We can create a separate buffer and copy its contents to our "),s("code",[t._v("camera_buffer")]),t._v(". The new buffer is known as a staging buffer. This method is usually how it's done as it allows the contents of the main buffer (in this case, "),s("code",[t._v("camera_buffer")]),t._v(") to be accessible only by the GPU. The GPU can do some speed optimizations, which it couldn't if we could access the buffer via the CPU.")]),t._v(" "),s("li",[t._v("We can call one of the mapping methods "),s("code",[t._v("map_read_async")]),t._v(", and "),s("code",[t._v("map_write_async")]),t._v(" on the buffer itself. These allow us to access a buffer's contents directly but require us to deal with the "),s("code",[t._v("async")]),t._v(" aspect of these methods. This also requires our buffer to use the "),s("code",[t._v("BufferUsages::MAP_READ")]),t._v(" and/or "),s("code",[t._v("BufferUsages::MAP_WRITE")]),t._v(". We won't talk about it here, but check out the "),s("a",{attrs:{href:"../../showcase/windowless"}},[t._v("Wgpu without a window")]),t._v(" tutorial if you want to know more.")]),t._v(" "),s("li",[t._v("We can use "),s("code",[t._v("write_buffer")]),t._v(" on "),s("code",[t._v("queue")]),t._v(".")])]),t._v(" "),s("p",[t._v("We're going to use option number 3.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("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.")]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Have our model rotate on its own independently of the camera. "),s("em",[t._v("Hint: you'll need another matrix for this.")])]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial6_uniforms"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{341:function(t,s,a){t.exports=a.p+"assets/img/static-tree.17986854.png"},437:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"uniform-buffers-and-a-3d-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-a-3d-camera"}},[t._v("#")]),t._v(" Uniform buffers and a 3d camera")]),t._v(" "),s("p",[t._v("While all of our previous work has seemed to be in 2D, we've actually been working in 3d the entire time! That's part of the reason why our "),s("code",[t._v("Vertex")]),t._v(" structure has "),s("code",[t._v("position")]),t._v(" as an array of 3 floats instead of just 2. We can't really see the 3d-ness of our scene because we're viewing things head-on. We're going to change our point of view by creating a "),s("code",[t._v("Camera")]),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"a-perspective-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-perspective-camera"}},[t._v("#")]),t._v(" A perspective camera")]),t._v(" "),s("p",[t._v("This tutorial is more about learning to use wgpu and less about linear algebra, so I'm going to gloss over a lot of the math involved. There's plenty of reading material online if you're interested in what's going on under the hood. We're going to use the "),s("a",{attrs:{href:"https://docs.rs/cgmath",target:"_blank",rel:"noopener noreferrer"}},[t._v("cgmath"),s("OutboundLink")],1),t._v(" to handle all the math for us. Add the following to your "),s("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n")])])]),s("p",[t._v("Now that we have a math library let's put it to use! Create a "),s("code",[t._v("Camera")]),t._v(" struct above the "),s("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("build_view_projection_matrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_at_rh")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fovy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("znear"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zfar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("build_view_projection_matrix")]),t._v(" is where the magic happens.")]),t._v(" "),s("ol",[s("li",[t._v("The "),s("code",[t._v("view")]),t._v(" matrix moves the world to be at the position and rotation of the camera. It's essentially an inverse of whatever the transform matrix of the camera would be.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("proj")]),t._v(" matrix warps the scene to give the effect of depth. Without this, objects up close would be the same size as objects far away.")]),t._v(" "),s("li",[t._v("The coordinate system in Wgpu is based on DirectX and Metal's coordinate systems. That means that in "),s("a",{attrs:{href:"https://github.com/gfx-rs/gfx/tree/master/src/backend/dx12#normalized-coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("normalized device coordinates"),s("OutboundLink")],1),t._v(", the x-axis and y-axis are in the range of -1.0 to +1.0, and the z-axis is 0.0 to +1.0. The "),s("code",[t._v("cgmath")]),t._v(" crate (as well as most game math crates) is built for OpenGL's coordinate system. This matrix will scale and translate our scene from OpenGL's coordinate system to WGPU's. We'll define it as follows.")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[t._v("Note: We don't explicitly "),s("strong",[t._v("need")]),t._v(" the "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(", but models centered on (0, 0, 0) will be halfway inside the clipping area. This is only an issue if you aren't using a camera matrix.")])]),t._v(" "),s("p",[t._v("Now let's add a "),s("code",[t._v("camera")]),t._v(" field to "),s("code",[t._v("State")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let diffuse_bind_group ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// position the camera 1 unit up and 2 units back")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// +z is out of the screen")]),t._v("\n eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// have it look at the origin")]),t._v("\n target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// which way is "up"')]),t._v("\n up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our camera, and it can make us a view projection matrix, we need somewhere to put it. We also need some way of getting it into our shaders.")]),t._v(" "),s("h2",{attrs:{id:"the-uniform-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-uniform-buffer"}},[t._v("#")]),t._v(" The uniform buffer")]),t._v(" "),s("p",[t._v("Up to this point, we've used "),s("code",[t._v("Buffer")]),t._v("s to store our vertex and index data, and even to load our textures. We are going to use them again to create what's known as a uniform buffer. A uniform is a blob of data available to every invocation of a set of shaders. Technically, we've already used uniforms for our texture and sampler. We're going to use them again to store our view projection matrix. To start, let's create a struct to hold our uniform.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need this for Rust to store our data correctly for the shaders")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is so we can store this in a buffer")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can't use cgmath with bytemuck directly, so we'll have")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to convert the Matrix4 into a 4x4 f32 array")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SquareMatrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our data structured, let's make our "),s("code",[t._v("camera_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// in new() after creating `camera`")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" camera_uniform "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncamera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Camera Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("UNIFORM")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"uniform-buffers-and-bind-groups"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-bind-groups"}},[t._v("#")]),t._v(" Uniform buffers and bind groups")]),t._v(" "),s("p",[t._v("Cool! Now that we have a uniform buffer, what do we do with it? The answer is we create a bind group for it. First, we have to create the bind group layout.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferBindingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n has_dynamic_offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_binding_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Some things to note:")]),t._v(" "),s("ol",[s("li",[t._v("We set "),s("code",[t._v("visibility")]),t._v(" to "),s("code",[t._v("ShaderStages::VERTEX")]),t._v(" as we only really need camera information in the vertex shader, as\nthat's what we'll use to manipulate our vertices.")]),t._v(" "),s("li",[t._v("The "),s("code",[t._v("has_dynamic_offset")]),t._v(" means that the location of the data in the buffer may change. This will be the case if you\nstore multiple data sets that vary in size in a single buffer. If you set this to true, you'll have to supply the\noffsets later.")]),t._v(" "),s("li",[s("code",[t._v("min_binding_size")]),t._v(" specifies the smallest size the buffer can be. You don't have to specify this, so we\nleave it "),s("code",[t._v("None")]),t._v(". If you want to know more, you can check "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.BindingType.html#variant.Buffer.field.min_binding_size",target:"_blank",rel:"noopener noreferrer"}},[t._v("the docs"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("p",[t._v("Now, we can create the actual bind group.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_entire_binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Like with our texture, we need to register our "),s("code",[t._v("camera_bind_group_layout")]),t._v(" with the render pipeline.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we need to add "),s("code",[t._v("camera_buffer")]),t._v(" and "),s("code",[t._v("camera_bind_group")]),t._v(" to "),s("code",[t._v("State")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The final thing we need to do before we get into shaders is use the bind group in "),s("code",[t._v("render()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"using-the-uniform-in-the-vertex-shader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-the-uniform-in-the-vertex-shader"}},[t._v("#")]),t._v(" Using the uniform in the vertex shader")]),t._v(" "),s("p",[t._v("Modify the vertex shader to include the following.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("binding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token builtin-attribute"}},[s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("builtin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token built-in-values attr-value"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" clip_position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",[s("li",[t._v("Because we've created a new bind group, we need to specify which one we're using in the shader. The number is determined by our "),s("code",[t._v("render_pipeline_layout")]),t._v(". The "),s("code",[t._v("texture_bind_group_layout")]),t._v(" is listed first, thus it's "),s("code",[t._v("group(0)")]),t._v(", and "),s("code",[t._v("camera_bind_group")]),t._v(" is second, so it's "),s("code",[t._v("group(1)")]),t._v(".")]),t._v(" "),s("li",[t._v("Multiplication order is important when it comes to matrices. The vector goes on the right, and the matrices go on the left in order of importance.")])]),t._v(" "),s("h2",{attrs:{id:"a-controller-for-our-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-controller-for-our-camera"}},[t._v("#")]),t._v(" A controller for our camera")]),t._v(" "),s("p",[t._v("If you run the code right now, you should get something like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(341),alt:"./static-tree.png"}})]),t._v(" "),s("p",[t._v("The shape's less stretched now, but it's still pretty static. You can experiment with moving the camera position around, but most cameras in games move around. Since this tutorial is about using wgpu and not how to process user input, I'm just going to post the "),s("code",[t._v("CameraController")]),t._v(" code below.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_events")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keycode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" is_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" keycode "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InnerSpace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_norm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prevents glitching when the camera gets too close to the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// center of the scene.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" forward_mag "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward_norm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-=")]),t._v(" forward_norm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward_norm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cross")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Redo radius calc in case the forward/backward is pressed.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rescale the distance between the target and the eye so ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// that it doesn't change. The eye, therefore, still ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lies on the circle made by the target and eye.")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This code is not perfect. The camera slowly moves back when you rotate it. It works for our purposes, though. Feel free to improve it!")]),t._v(" "),s("p",[t._v("We still need to plug this into our existing code to make it do anything. Add the controller to "),s("code",[t._v("State")]),t._v(" and create it in "),s("code",[t._v("new()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We're finally going to add some code to "),s("code",[t._v("input()")]),t._v(" (assuming you haven't already)!")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_events")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Up to this point, the camera controller isn't actually doing anything. The values in our uniform buffer need to be updated. There are a few main methods to do that.")]),t._v(" "),s("ol",[s("li",[t._v("We can create a separate buffer and copy its contents to our "),s("code",[t._v("camera_buffer")]),t._v(". The new buffer is known as a staging buffer. This method is usually how it's done as it allows the contents of the main buffer (in this case, "),s("code",[t._v("camera_buffer")]),t._v(") to be accessible only by the GPU. The GPU can do some speed optimizations, which it couldn't if we could access the buffer via the CPU.")]),t._v(" "),s("li",[t._v("We can call one of the mapping methods "),s("code",[t._v("map_read_async")]),t._v(", and "),s("code",[t._v("map_write_async")]),t._v(" on the buffer itself. These allow us to access a buffer's contents directly but require us to deal with the "),s("code",[t._v("async")]),t._v(" aspect of these methods. This also requires our buffer to use the "),s("code",[t._v("BufferUsages::MAP_READ")]),t._v(" and/or "),s("code",[t._v("BufferUsages::MAP_WRITE")]),t._v(". We won't talk about it here, but check out the "),s("a",{attrs:{href:"../../showcase/windowless"}},[t._v("Wgpu without a window")]),t._v(" tutorial if you want to know more.")]),t._v(" "),s("li",[t._v("We can use "),s("code",[t._v("write_buffer")]),t._v(" on "),s("code",[t._v("queue")]),t._v(".")])]),t._v(" "),s("p",[t._v("We're going to use option number 3.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("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.")]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Have our model rotate on its own independently of the camera. "),s("em",[t._v("Hint: you'll need another matrix for this.")])]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial6_uniforms"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/47.9e9479e1.js b/assets/js/47.22e16c22.js similarity index 99% rename from assets/js/47.9e9479e1.js rename to assets/js/47.22e16c22.js index bf44d41c..cca4e6fb 100644 --- a/assets/js/47.9e9479e1.js +++ b/assets/js/47.22e16c22.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{340:function(t,s,a){t.exports=a.p+"assets/img/forest.5c5cf3ad.png"},437:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"instancing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#instancing"}},[t._v("#")]),t._v(" Instancing")]),t._v(" "),s("p",[t._v("Our scene right now is very simple: we have one object centered at (0,0,0). What if we wanted more objects? This is where instancing comes in.")]),t._v(" "),s("p",[t._v("Instancing allows us to draw the same object multiple times with different properties (position, orientation, size, color, etc.). There are multiple ways of doing instancing. One way would be to modify the uniform buffer to include these properties and then update it before we draw each instance of our object.")]),t._v(" "),s("p",[t._v("We don't want to use this method for performance reasons. Updating the uniform buffer for each instance would require multiple buffer copies for each frame. On top of that, our method to update the uniform buffer currently requires us to create a new buffer to store the updated data. That's a lot of time wasted between draw calls.")]),t._v(" "),s("p",[t._v("If we look at the parameters for the "),s("code",[t._v("draw_indexed")]),t._v(" function "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.RenderPass.html#method.draw_indexed",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the wgpu docs"),s("OutboundLink")],1),t._v(", we can see a solution to our problem.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n base_vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// <-- This right here")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("instances")]),t._v(" parameter takes a "),s("code",[t._v("Range")]),t._v(". This parameter tells the GPU how many copies, or instances, of the model we want to draw. Currently, we are specifying "),s("code",[t._v("0..1")]),t._v(", which instructs the GPU to draw our model once and then stop. If we used "),s("code",[t._v("0..5")]),t._v(", our code would draw five instances.")]),t._v(" "),s("p",[t._v("The fact that "),s("code",[t._v("instances")]),t._v(" is a "),s("code",[t._v("Range")]),t._v(" may seem weird, as using "),s("code",[t._v("1..2")]),t._v(" for instances would still draw one instance of our object. It seems like it would be simpler just to use a "),s("code",[t._v("u32")]),t._v(", right? The reason it's a range is that sometimes we don't want to draw "),s("strong",[t._v("all")]),t._v(" of our objects. Sometimes, we want to draw a selection of them because others are not in the frame, or we are debugging and want to look at a particular set of instances.")]),t._v(" "),s("p",[t._v("Ok, now we know how to draw multiple instances of an object. How do we tell wgpu what particular instance to draw? We are going to use something known as an instance buffer.")]),t._v(" "),s("h2",{attrs:{id:"the-instance-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-instance-buffer"}},[t._v("#")]),t._v(" The Instance Buffer")]),t._v(" "),s("p",[t._v("We'll create an instance buffer similarly to how we create a uniform buffer. First, we'll create a struct called "),s("code",[t._v("Instance")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("A "),s("code",[t._v("Quaternion")]),t._v(" is a mathematical structure often used to represent rotation. The math behind them is beyond me (it involves imaginary numbers and 4D space), so I won't be covering them here. If you really want to dive into them "),s("a",{attrs:{href:"https://mathworld.wolfram.com/Quaternion.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here's a Wolfram Alpha article"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("p",[t._v("Using these values directly in the shader would be a pain, as quaternions don't have a WGSL analog. I don't feel like writing the math in the shader, so we'll convert the "),s("code",[t._v("Instance")]),t._v(" data into a matrix and store it in a struct called "),s("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This is the data that will go into the "),s("code",[t._v("wgpu::Buffer")]),t._v(". We keep these separate so that we can update the "),s("code",[t._v("Instance")]),t._v(" as much as we want without needing to mess with matrices. We only need to update the raw data before we draw.")]),t._v(" "),s("p",[t._v("Let's create a method on "),s("code",[t._v("Instance")]),t._v(" to convert to "),s("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now we need to add two fields to "),s("code",[t._v("State")]),t._v(": "),s("code",[t._v("instances")]),t._v(" and "),s("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("cgmath")]),t._v(" crate uses traits to provide common mathematical methods across its structs, such as "),s("code",[t._v("Vector3")]),t._v(", which must be imported before these methods can be called. For convenience, the "),s("code",[t._v("prelude")]),t._v(" module within the crate provides the most common of these extension crates when it is imported.")]),t._v(" "),s("p",[t._v("To import this prelude module, put this line near the top of "),s("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("prelude"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We'll create the instances in "),s("code",[t._v("new()")]),t._v(". We'll use some constants to simplify things. We'll display our instances in 10 rows of 10, and they'll be spaced evenly apart.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now, we can create the actual instances.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" z "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this is needed so an object at (0, 0, 0) won't get scaled to zero")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as Quaternions can affect scale if they're not created correctly")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our data, we can create the actual "),s("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("to_raw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Instance Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("instance_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to need to create a new "),s("code",[t._v("VertexBufferLayout")]),t._v(" for "),s("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to switch from using a step mode of Vertex to Instance")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for each vec4. We'll have to reassemble the mat4 in the shader.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// While our vertex shader only uses locations 0, and 1 now, in later tutorials, we'll")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// be using 2, 3, and 4, for Vertex. We'll start at slot 5, not conflict with them later")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to add this descriptor to the render pipeline so that we can use it when we render.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Don't forget to return our new variables!")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The last change we need to make is in the "),s("code",[t._v("render()")]),t._v(" method. We need to bind our "),s("code",[t._v("instance_buffer")]),t._v(" and change the range we're using in "),s("code",[t._v("draw_indexed()")]),t._v(" to include the number of instances.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"warning"},[s("p",[t._v("Make sure that if you add new instances to the "),s("code",[t._v("Vec")]),t._v(", you recreate the "),s("code",[t._v("instance_buffer")]),t._v(" as well as "),s("code",[t._v("camera_bind_group")]),t._v(". Otherwise, your new instances won't show up correctly.")])]),t._v(" "),s("p",[t._v("We need to reference the parts of our new matrix in "),s("code",[t._v("shader.wgsl")]),t._v(" so that we can use it for our instances. Add the following to the top of "),s("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We need to reassemble the matrix before we can use it.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Continued...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll apply the "),s("code",[t._v("model_matrix")]),t._v(" before we apply "),s("code",[t._v("camera_uniform.view_proj")]),t._v(". We do this because the "),s("code",[t._v("camera_uniform.view_proj")]),t._v(" changes the coordinate system from "),s("code",[t._v("world space")]),t._v(" to "),s("code",[t._v("camera space")]),t._v(". Our "),s("code",[t._v("model_matrix")]),t._v(" is a "),s("code",[t._v("world space")]),t._v(" transformation, so we don't want to be in "),s("code",[t._v("camera space")]),t._v(" when using it.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With all that done, we should have a forest of trees!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(340),alt:"./forest.png"}})]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Modify the position and/or rotation of the instances every frame.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial7_instancing"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{342:function(t,s,a){t.exports=a.p+"assets/img/forest.5c5cf3ad.png"},438:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"instancing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#instancing"}},[t._v("#")]),t._v(" Instancing")]),t._v(" "),s("p",[t._v("Our scene right now is very simple: we have one object centered at (0,0,0). What if we wanted more objects? This is where instancing comes in.")]),t._v(" "),s("p",[t._v("Instancing allows us to draw the same object multiple times with different properties (position, orientation, size, color, etc.). There are multiple ways of doing instancing. One way would be to modify the uniform buffer to include these properties and then update it before we draw each instance of our object.")]),t._v(" "),s("p",[t._v("We don't want to use this method for performance reasons. Updating the uniform buffer for each instance would require multiple buffer copies for each frame. On top of that, our method to update the uniform buffer currently requires us to create a new buffer to store the updated data. That's a lot of time wasted between draw calls.")]),t._v(" "),s("p",[t._v("If we look at the parameters for the "),s("code",[t._v("draw_indexed")]),t._v(" function "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.RenderPass.html#method.draw_indexed",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the wgpu docs"),s("OutboundLink")],1),t._v(", we can see a solution to our problem.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n base_vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// <-- This right here")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("instances")]),t._v(" parameter takes a "),s("code",[t._v("Range")]),t._v(". This parameter tells the GPU how many copies, or instances, of the model we want to draw. Currently, we are specifying "),s("code",[t._v("0..1")]),t._v(", which instructs the GPU to draw our model once and then stop. If we used "),s("code",[t._v("0..5")]),t._v(", our code would draw five instances.")]),t._v(" "),s("p",[t._v("The fact that "),s("code",[t._v("instances")]),t._v(" is a "),s("code",[t._v("Range")]),t._v(" may seem weird, as using "),s("code",[t._v("1..2")]),t._v(" for instances would still draw one instance of our object. It seems like it would be simpler just to use a "),s("code",[t._v("u32")]),t._v(", right? The reason it's a range is that sometimes we don't want to draw "),s("strong",[t._v("all")]),t._v(" of our objects. Sometimes, we want to draw a selection of them because others are not in the frame, or we are debugging and want to look at a particular set of instances.")]),t._v(" "),s("p",[t._v("Ok, now we know how to draw multiple instances of an object. How do we tell wgpu what particular instance to draw? We are going to use something known as an instance buffer.")]),t._v(" "),s("h2",{attrs:{id:"the-instance-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-instance-buffer"}},[t._v("#")]),t._v(" The Instance Buffer")]),t._v(" "),s("p",[t._v("We'll create an instance buffer similarly to how we create a uniform buffer. First, we'll create a struct called "),s("code",[t._v("Instance")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("A "),s("code",[t._v("Quaternion")]),t._v(" is a mathematical structure often used to represent rotation. The math behind them is beyond me (it involves imaginary numbers and 4D space), so I won't be covering them here. If you really want to dive into them "),s("a",{attrs:{href:"https://mathworld.wolfram.com/Quaternion.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here's a Wolfram Alpha article"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("p",[t._v("Using these values directly in the shader would be a pain, as quaternions don't have a WGSL analog. I don't feel like writing the math in the shader, so we'll convert the "),s("code",[t._v("Instance")]),t._v(" data into a matrix and store it in a struct called "),s("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("This is the data that will go into the "),s("code",[t._v("wgpu::Buffer")]),t._v(". We keep these separate so that we can update the "),s("code",[t._v("Instance")]),t._v(" as much as we want without needing to mess with matrices. We only need to update the raw data before we draw.")]),t._v(" "),s("p",[t._v("Let's create a method on "),s("code",[t._v("Instance")]),t._v(" to convert to "),s("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now we need to add two fields to "),s("code",[t._v("State")]),t._v(": "),s("code",[t._v("instances")]),t._v(" and "),s("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("cgmath")]),t._v(" crate uses traits to provide common mathematical methods across its structs, such as "),s("code",[t._v("Vector3")]),t._v(", which must be imported before these methods can be called. For convenience, the "),s("code",[t._v("prelude")]),t._v(" module within the crate provides the most common of these extension crates when it is imported.")]),t._v(" "),s("p",[t._v("To import this prelude module, put this line near the top of "),s("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("prelude"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We'll create the instances in "),s("code",[t._v("new()")]),t._v(". We'll use some constants to simplify things. We'll display our instances in 10 rows of 10, and they'll be spaced evenly apart.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now, we can create the actual instances.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" x "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" z "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this is needed so an object at (0, 0, 0) won't get scaled to zero")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as Quaternions can affect scale if they're not created correctly")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Now that we have our data, we can create the actual "),s("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("to_raw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Instance Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("instance_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to need to create a new "),s("code",[t._v("VertexBufferLayout")]),t._v(" for "),s("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'static")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to switch from using a step mode of Vertex to Instance")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for each vec4. We'll have to reassemble the mat4 in the shader.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// While our vertex shader only uses locations 0, and 1 now, in later tutorials, we'll")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// be using 2, 3, and 4, for Vertex. We'll start at slot 5, not conflict with them later")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We need to add this descriptor to the render pipeline so that we can use it when we render.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Don't forget to return our new variables!")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The last change we need to make is in the "),s("code",[t._v("render()")]),t._v(" method. We need to bind our "),s("code",[t._v("instance_buffer")]),t._v(" and change the range we're using in "),s("code",[t._v("draw_indexed()")]),t._v(" to include the number of instances.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\nrender_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"warning"},[s("p",[t._v("Make sure that if you add new instances to the "),s("code",[t._v("Vec")]),t._v(", you recreate the "),s("code",[t._v("instance_buffer")]),t._v(" as well as "),s("code",[t._v("camera_bind_group")]),t._v(". Otherwise, your new instances won't show up correctly.")])]),t._v(" "),s("p",[t._v("We need to reference the parts of our new matrix in "),s("code",[t._v("shader.wgsl")]),t._v(" so that we can use it for our instances. Add the following to the top of "),s("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("7")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("location")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We need to reassemble the matrix before we can use it.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model_matrix_3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Continued...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We'll apply the "),s("code",[t._v("model_matrix")]),t._v(" before we apply "),s("code",[t._v("camera_uniform.view_proj")]),t._v(". We do this because the "),s("code",[t._v("camera_uniform.view_proj")]),t._v(" changes the coordinate system from "),s("code",[t._v("world space")]),t._v(" to "),s("code",[t._v("camera space")]),t._v(". Our "),s("code",[t._v("model_matrix")]),t._v(" is a "),s("code",[t._v("world space")]),t._v(" transformation, so we don't want to be in "),s("code",[t._v("camera space")]),t._v(" when using it.")]),t._v(" "),s("div",{staticClass:"language-wgsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-wgsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("@")]),s("span",{pre:!0,attrs:{class:"token attributes attr-name"}},[t._v("vertex")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token functions function"}},[t._v("vs_main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceInput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" model_matrix "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With all that done, we should have a forest of trees!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(342),alt:"./forest.png"}})]),t._v(" "),s("h2",{attrs:{id:"challenge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),s("p",[t._v("Modify the position and/or rotation of the instances every frame.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial7_instancing"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/48.0a15e622.js b/assets/js/48.7d70df25.js similarity index 99% rename from assets/js/48.0a15e622.js rename to assets/js/48.7d70df25.js index 174a9835..f6c3d207 100644 --- a/assets/js/48.0a15e622.js +++ b/assets/js/48.7d70df25.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{381:function(t,e,a){t.exports=a.p+"assets/img/normal_mapping_correct.2731b486.png"},455:function(t,e,a){"use strict";a.r(e);var s=a(7),n=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"news-pre-0-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#news-pre-0-12"}},[t._v("#")]),t._v(" News (Pre 0.12)")]),t._v(" "),e("h2",{attrs:{id:"pong-working-on-the-web"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#pong-working-on-the-web"}},[t._v("#")]),t._v(" Pong working on the web")]),t._v(" "),e("p",[t._v("This took a little while to figure out. I ended up using wasm-pack to create the wasm as I was having trouble with getting wasm-bindgen to work. I figured it out eventually but decided to keep using wasm-pack as I felt that the workflow would be more friendly to readers.")]),t._v(" "),e("p",[t._v("I would have released this sooner, but I wanted to add support for touch so that people on their phones could play the game. It appears that winit doesn't record touch events for WASM, so I shelved that idea.")]),t._v(" "),e("p",[t._v("If you want to check out the demo, just head over to "),e("RouterLink",{attrs:{to:"/news/showcase/pong/#wasm-support"}},[t._v("the write up")])],1),t._v(" "),e("h2",{attrs:{id:"_0-12-further-changes-to-surface"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-12-further-changes-to-surface"}},[t._v("#")]),t._v(" 0.12 further changes to Surface")]),t._v(" "),e("p",[e("code",[t._v("SwapchainFrame")]),t._v(" is no longer a thing. Instead "),e("code",[t._v("get_current_texture")]),t._v(" will return a "),e("code",[t._v("SurfaceTexture")]),t._v(" directly. This means that getting a frame to draw to looks somethings like this:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Another change is that you must call "),e("code",[t._v("SurfaceTexture::present()")]),t._v(" after you submit your render command buffers to the "),e("code",[t._v("queue")]),t._v(". It goes something like this:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("iter"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\noutput"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("There are a good deal of internal changes such as WebGL support (which I really need to cover). You can check out more on wgpu's "),e("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/blob/master/CHANGELOG.md#wgpu-011-2021-10-07",target:"_blank",rel:"noopener noreferrer"}},[t._v("changelog"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("h2",{attrs:{id:"pong-is-fixed-for-0-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#pong-is-fixed-for-0-10"}},[t._v("#")]),t._v(" Pong is fixed for 0.10")]),t._v(" "),e("p",[t._v("It wasn't actually that hard of a fix. I only really use the swapchain directly in the render module, and the only other change required me to include the "),e("code",[t._v("spirv")]),t._v(" feature to wgpu in Cargo.toml.")]),t._v(" "),e("h2",{attrs:{id:"_0-10-swapchain-is-dead-long-live-the-surface"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-10-swapchain-is-dead-long-live-the-surface"}},[t._v("#")]),t._v(" 0.10 SwapChain is dead, long live the Surface!")]),t._v(" "),e("p",[e("code",[t._v("SwapChain")]),t._v(" and all related code has been removed from wgpu. All code pertaining to obtaining textures to draw to from the window will be available from the "),e("code",[t._v("Surface")]),t._v(" instead. That means configuring "),e("code",[t._v("SurfaceTexture")]),t._v("s will look something like this:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsurface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Resizing the surface will use similar code:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("Finally, getting a "),e("code",[t._v("SurfaceTexture")]),t._v(" to draw to will use the surface directly.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("The Pong and imgui examples are broken again. I may remove the imgui example as the corresponding crate already has examples of how to use it. I'm also considering reworking the Pong example, but I may end up just updating it.")]),t._v(" "),e("h2",{attrs:{id:"pong-and-imgui-demos-are-fixed"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#pong-and-imgui-demos-are-fixed"}},[t._v("#")]),t._v(" Pong and imgui demos are fixed!")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("imgui_wgpu")]),t._v(" and "),e("code",[t._v("wgpu_glyph")]),t._v(" crates have been updated to "),e("code",[t._v("wgpu")]),t._v(" 0.8 so I was able to fix the demos! They both still use GLSL, and I don't think I'll be changing that for now. I may switch them over to "),e("code",[t._v("naga")]),t._v(" at some point.")]),t._v(" "),e("h2",{attrs:{id:"_0-8-and-wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-8-and-wgsl"}},[t._v("#")]),t._v(" 0.8 and WGSL")]),t._v(" "),e("h3",{attrs:{id:"the-glsl-shaders-have-been-translated-to-wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-glsl-shaders-have-been-translated-to-wgsl"}},[t._v("#")]),t._v(" The GLSL shaders have been translated to WGSL")]),t._v(" "),e("p",[t._v("Originally I wanted to wait until the WGSL spec fully stabilized, but due to some issues with the GLSL code, I've decided to switch over the code now. While GLSL is supported by WebGPU, it's currently secondary to WGSL. I'll keep an example of how to use GLSL (and maybe add HLSL and Metal as well), but I'm going to use WGSL from now on.")]),t._v(" "),e("h3",{attrs:{id:"shaderc-has-been-removed"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#shaderc-has-been-removed"}},[t._v("#")]),t._v(" Shaderc has been removed")]),t._v(" "),e("p",[t._v("I've been thinking about doing this for a while now. Because shaderc is a c library, it often has to be redownloaded during builds. This has been slowing down my ability to add new content and maintain old content. I had been considering switching to naga earlier, but some of my shaders (notably the lighting ones) weren't compiling with naga as I was using features not available for compatibility reasons ("),e("code",[t._v("inverse")]),t._v(" is not available in all languages targeting spirv).")]),t._v(" "),e("p",[t._v("Since I needed to make a bunch of changes to the code base to make the glsl, and because I wanted to switch the tutorial to WGSL anyways, I decided to bite the bullet and recode everything in WGSL and remove shaderc from the tutorials.")]),t._v(" "),e("h3",{attrs:{id:"some-of-the-showcase-examples-are-broken"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#some-of-the-showcase-examples-are-broken"}},[t._v("#")]),t._v(" Some of the showcase examples are broken")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("wgpu_glyph")]),t._v(", and "),e("code",[t._v("imgui-wgpu")]),t._v(" crates currently depend on "),e("code",[t._v("wgpu")]),t._v(" 0.7, which is causing the "),e("code",[t._v("pong")]),t._v(" and "),e("code",[t._v("imgui-demo")]),t._v(" to not compile. I decided to exclude them from the workspace until the underlying crates update to using "),e("code",[t._v("wgpu")]),t._v(" 0.8. (Feel free to submit a issue or even PR when that happens!)")]),t._v(" "),e("h3",{attrs:{id:"various-api-changes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#various-api-changes"}},[t._v("#")]),t._v(" Various API changes")]),t._v(" "),e("ul",[e("li",[t._v("The "),e("code",[t._v("depth")]),t._v(" field is now "),e("code",[t._v("depth_or_array_layers")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::VertexFormat::Float3")]),t._v(" is now "),e("code",[t._v("wgpu::VertexFormat::Float32x3")]),t._v(". Similar things apply to "),e("code",[t._v("Float2")]),t._v(" and "),e("code",[t._v("Float4")])]),t._v(" "),e("li",[e("code",[t._v("CullMode")]),t._v(" is no longer a thing, instead "),e("code",[t._v("PrimitiveState::cull_mode")]),t._v(" will require an "),e("code",[t._v("Option")])]),t._v(" "),e("li",[t._v("Added "),e("code",[t._v("clamp_depth")]),t._v(" and "),e("code",[t._v("conservative")]),t._v(" to "),e("code",[t._v("PrimitiveState")]),t._v(". Part of this means that "),e("code",[t._v("DepthStencilState")]),t._v(" no longer has a "),e("code",[t._v("clamp_depth")]),t._v(" field.")]),t._v(" "),e("li",[e("code",[t._v("color_blend")]),t._v(" and "),e("code",[t._v("alpha_blend")]),t._v(" have been moved into the new "),e("code",[t._v("blend")]),t._v(" field with accepts an "),e("code",[t._v("Option")])]),t._v(" "),e("li",[e("code",[t._v("adapter.get_preferred_format()")]),t._v(" now returns an "),e("code",[t._v("Option")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::RenderPassColorAttachmentDescriptor")]),t._v(" has been renamed "),e("code",[t._v("wgpu::RenderPassColorAttachement")]),t._v(" and the "),e("code",[t._v("attachment")]),t._v(" field has been renamed to "),e("code",[t._v("view")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::RenderPassDepthStencialAttachmentDescriptor")]),t._v(" also loses the "),e("code",[t._v("Descriptor")]),t._v(" part of it's name. "),e("code",[t._v("attachment")]),t._v(" gets renamed to "),e("code",[t._v("view")]),t._v(" as well.")]),t._v(" "),e("li",[e("code",[t._v("wgpu::TextureCopyView")]),t._v(" has been renamed to "),e("code",[t._v("wgpu::ImageCopyTexture")]),t._v(". This is a typedef for "),e("code",[t._v("wgpu::ImageCopyTextureBase")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::TextureDataLayout")]),t._v(" is now "),e("code",[t._v("wgpu::ImageDataLayout")]),t._v(" and it's "),e("code",[t._v("bytes_per_row")]),t._v(" and "),e("code",[t._v("rows_per_image")]),t._v(" now take "),e("code",[t._v("NonZeroU32")]),t._v(".")]),t._v(" "),e("li",[e("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(" is now "),e("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"_0-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-7"}},[t._v("#")]),t._v(" 0.7")]),t._v(" "),e("p",[t._v("There were a lot of changes, particularly to the "),e("code",[t._v("RenderPipelineDescriptor")]),t._v(". Most other things have not changed. You can check out the "),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/140",target:"_blank",rel:"noopener noreferrer"}},[t._v("0.9 PR"),e("OutboundLink")],1),t._v(" for the full details.")]),t._v(" "),e("h2",{attrs:{id:"november-2020-cleanup-content-freeze-and-patreon"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#november-2020-cleanup-content-freeze-and-patreon"}},[t._v("#")]),t._v(" November 2020 Cleanup, Content Freeze, and Patreon")]),t._v(" "),e("p",[t._v("School is starting to ramp up, so I haven't had as much time to work on the site as I would like to. Because of that, there were some issues piling up. I decided to tackle a bunch of them in one go. Here's a snapshot of what I did:")]),t._v(" "),e("ul",[e("li",[t._v("The tutorial now handles "),e("code",[t._v("SurfaceError")]),t._v(" properly")]),t._v(" "),e("li",[t._v("I'm now using bytemuck's derive feature on all buffer data structs.")]),t._v(" "),e("li",[t._v("The "),e("a",{attrs:{href:"../beginner/tutorial7-instancing"}},[t._v("instancing tutorial")]),t._v(" now uses vertex buffers instead of storage buffers.")]),t._v(" "),e("li",[e("code",[t._v("build.rs")]),t._v(" now updates when individual shaders are changed, not whenever "),e("code",[t._v("/src")]),t._v(" is changed.")]),t._v(" "),e("li",[t._v("Had some help from Github user @kanerogers to clean up the "),e("a",{attrs:{href:"../beginner/tutorial5-textures"}},[t._v("texturing tutorial")]),t._v(".")]),t._v(" "),e("li",[t._v("I made a "),e("a",{attrs:{href:"../showcase/compute"}},[t._v("compute pipeline showcase")]),t._v(" that computes the tangent and bitangent for each vertex in a model.")]),t._v(" "),e("li",[t._v("I made a "),e("a",{attrs:{href:"../showcase/imgui-demo"}},[t._v("imgui showcase")]),t._v(". It's very basic, but it should be a good starting point.")])]),t._v(" "),e("p",[t._v('Now in the headline, I mentioned a "Content Freeze". Wgpu is still a moving target. The migration from '),e("code",[t._v("0.4")]),t._v(" to "),e("code",[t._v("0.5")]),t._v(" was a lot of work. The same goes for "),e("code",[t._v("0.5")]),t._v(" to "),e("code",[t._v("0.6")]),t._v(". I expect the next migration to be just as much work. As such, I won't be adding much content until the API becomes a bit more stable. That being said, I still plan on resolving any issues with the content.")]),t._v(" "),e("p",[t._v("One more thing. This is actually quite awkward for me (especially since I'll be slowing down development), but I've started a "),e("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),e("OutboundLink")],1),t._v(". My job doesn't give me a ton of hours, so things are a bit tight. You are by no means obligated to donate, but I would appreciate it.")]),t._v(" "),e("p",[t._v("You can find out more about contributing to this project on the "),e("RouterLink",{attrs:{to:"/news/#contribution-and-support"}},[t._v("introduction page")])],1),t._v(" "),e("h2",{attrs:{id:"_0-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-6"}},[t._v("#")]),t._v(" 0.6")]),t._v(" "),e("p",[t._v("This took me way too long. The changes weren't difficult, but I had to do a lot of copy pasting. The main changes are using "),e("code",[t._v("queue.write_buffer()")]),t._v(" and "),e("code",[t._v("queue.write_texture()")]),t._v(" everywhere. I won't get into the nitty gritty, but you can check out the "),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/90",target:"_blank",rel:"noopener noreferrer"}},[t._v("pull request"),e("OutboundLink")],1),t._v(" if you're interested.")]),t._v(" "),e("h2",{attrs:{id:"added-pong-showcase"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#added-pong-showcase"}},[t._v("#")]),t._v(" Added Pong Showcase")]),t._v(" "),e("p",[e("RouterLink",{attrs:{to:"/news/showcase/pong/"}},[t._v("See it here")])],1),t._v(" "),e("h2",{attrs:{id:"normal-mapping"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#normal-mapping"}},[t._v("#")]),t._v(" Normal mapping")]),t._v(" "),e("p",[t._v('My perfectionism got in my way a bit with this one. I wasn\'t sure that what I was getting was "physically accurate", but it seems to look good.')]),t._v(" "),e("p",[e("img",{attrs:{src:a(381),alt:""}})]),t._v(" "),e("h2",{attrs:{id:"_0-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-5"}},[t._v("#")]),t._v(" 0.5!")]),t._v(" "),e("p",[t._v("Too many things changed to make note of them here. Check out "),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/29",target:"_blank",rel:"noopener noreferrer"}},[t._v("the 0.5 pull request"),e("OutboundLink")],1),t._v(" if you're curious about specifics. That being said, 2 things are worth mentioning directly: the y-axis now points up like with DirectX and Metal, and requesting an adapter and creating a device now use "),e("code",[t._v("Future")]),t._v("s. The tutorials have been updated as well as the code.")]),t._v(" "),e("h2",{attrs:{id:"reworked-lighting-tutorial"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#reworked-lighting-tutorial"}},[t._v("#")]),t._v(" Reworked lighting tutorial")]),t._v(" "),e("p",[t._v("The "),e("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/"}},[t._v("lighting tutorial")]),t._v(" was not up to par, so I redid it.")],1),t._v(" "),e("h2",{attrs:{id:"added-gif-showcase"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#added-gif-showcase"}},[t._v("#")]),t._v(" Added GIF showcase")]),t._v(" "),e("p",[e("RouterLink",{attrs:{to:"/showcase/gifs/"}},[t._v("Creating GIFs")])],1),t._v(" "),e("h2",{attrs:{id:"updated-texture-tutorials"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updated-texture-tutorials"}},[t._v("#")]),t._v(" Updated texture tutorials")]),t._v(" "),e("p",[t._v("Up to this point, we created textures manually every time. I've pulled out the texture creation code into a new "),e("code",[t._v("texture.rs")]),t._v(" file and included it in every tutorial from the "),e("RouterLink",{attrs:{to:"/beginner/tutorial5-textures/#cleaning-things-up"}},[t._v("textures tutorial")]),t._v(" onward.")],1),t._v(" "),e("h2",{attrs:{id:"fixed-panics-due-to-not-specifying-the-correct-usage"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fixed-panics-due-to-not-specifying-the-correct-usage"}},[t._v("#")]),t._v(" Fixed panics due to not specifying the correct "),e("code",[t._v("usage")])]),t._v(" "),e("p",[t._v("Wgpu has become more strict about what "),e("code",[t._v("BufferUsages")]),t._v("s and "),e("code",[t._v("TextureUsages")]),t._v("s are required when performing certain operations. For example in the "),e("RouterLink",{attrs:{to:"/intermediate/windowless/"}},[t._v("Wgpu without a window example")]),t._v(", the "),e("code",[t._v("texture_desc")]),t._v(" only specified the usage to by "),e("code",[t._v("COPY_SRC")]),t._v(". This caused a crash when the "),e("code",[t._v("texture")]),t._v(" was used as a render target. Adding "),e("code",[t._v("OUTPUT_ATTACHMENT")]),t._v(" fixed the issue.")],1),t._v(" "),e("h2",{attrs:{id:"updating-winit-from-0-20-0-alpha5-to-0-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updating-winit-from-0-20-0-alpha5-to-0-20"}},[t._v("#")]),t._v(" Updating Winit from 0.20.0-alpha5 to 0.20")]),t._v(" "),e("p",[t._v("There were a lot of small changes to how the dpi stuff works. You can see all the changes "),e("a",{attrs:{href:"https://github.com/rust-windowing/winit/blob/master/CHANGELOG.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the changelog"),e("OutboundLink")],1),t._v(". That means that some of the tutorials had to change.")]),t._v(" "),e("ul",[e("li",[t._v("I've removed "),e("code",[t._v("hidpi_factor")]),t._v(" from "),e("code",[t._v("State")]),t._v(" entirely. They removed the "),e("code",[t._v("hidpi_factor()")]),t._v(" method from "),e("code",[t._v("winit::window::Window")]),t._v(", and changed "),e("code",[t._v("inner_size()")]),t._v(" to return "),e("code",[t._v("PhysicalSize")]),t._v(" instead of "),e("code",[t._v("LogicalSize")]),t._v(", so we don't need to store the "),e("code",[t._v("hidpi_factor")]),t._v(" anymore.")]),t._v(" "),e("li",[e("code",[t._v("update_hidpi_and_resize")]),t._v(" is no more. Since "),e("code",[t._v("ScaleFactorChanged")]),t._v(" passes in the windows new "),e("code",[t._v("PhysicalSize")]),t._v(", we can simply use "),e("code",[t._v("resize()")]),t._v(".")]),t._v(" "),e("li",[e("code",[t._v("State::size")]),t._v(" is now "),e("code",[t._v("PhysicalSize")]),t._v(" instead of the pre 0.20 "),e("code",[t._v("LogicalSize")]),t._v(".")]),t._v(" "),e("li",[e("code",[t._v("EventsCleared")]),t._v(" is now "),e("code",[t._v("MainEventsCleared")]),t._v(".")])]),t._v(" "),e("p",[t._v("I may have missed a change, but I made sure that all the examples compile and run, so if you have trouble with your code you can use them as a reference.")]),t._v(" "),e("h2",{attrs:{id:"changed-tutorial-examples-to-use-a-src-directory"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#changed-tutorial-examples-to-use-a-src-directory"}},[t._v("#")]),t._v(" Changed tutorial examples to use a src directory")]),t._v(" "),e("p",[t._v("I wasn't using the traditional cargo binary folder setup. I've changed it to the standardized form now.")]),t._v(" "),e("h2",{attrs:{id:"updating-to-0-4-from-0-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updating-to-0-4-from-0-3"}},[t._v("#")]),t._v(" Updating to 0.4 from 0.3")]),t._v(" "),e("p",[t._v("There are a few things that have changed:")]),t._v(" "),e("ol",[e("li",[t._v("The use of "),e("code",[t._v("Instance")]),t._v(" has been removed. Creating a "),e("code",[t._v("Surface")]),t._v(" and requesting an "),e("code",[t._v("Adapter")]),t._v(" are done as follows.")])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Adapter")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("request")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// needs to be unwrapped")]),t._v("\n")])])]),e("ol",{attrs:{start:"2"}},[e("li",[t._v("The "),e("code",[t._v("request_device")]),t._v(" method now returns a "),e("code",[t._v("(Device, Queue)")]),t._v(" tuple. This means that you can borrow the "),e("code",[t._v("Queue")]),t._v(" mutably while using the "),e("code",[t._v("Device")]),t._v(" immutably. Because of this change, submitting "),e("code",[t._v("CommandBuffer")]),t._v("s to the queue uses the "),e("code",[t._v("submit")]),t._v(" method on the "),e("code",[t._v("Queue")]),t._v(" directly.")])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ol",{attrs:{start:"3"}},[e("li",[t._v("The "),e("code",[t._v("create")]),t._v(" method on "),e("code",[t._v("Surface")]),t._v(" takes in any struct that implements the "),e("code",[t._v("HasRawWindow")]),t._v(" trait, instead of a "),e("code",[t._v("RawWindowHandle")]),t._v(". This means that the "),e("code",[t._v('raw-window-handle = "0.3"')]),t._v(" line in "),e("code",[t._v("Cargo.toml")]),t._v(" is no longer needed.")])]),t._v(" "),e("p",[t._v("I don't know if this is a change from 0.4, but you use "),e("code",[t._v('wgpu = "0.4"')]),t._v(" line in dependencies instead of the "),e("code",[t._v("[dependencies.wgpu]")]),t._v(" as wgpu will determine the best back end for you.")]),t._v(" "),e("h2",{attrs:{id:"new-recent-articles"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#new-recent-articles"}},[t._v("#")]),t._v(" New/Recent Articles")]),t._v(" "),e("RecentArticles")],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{381:function(t,e,a){t.exports=a.p+"assets/img/normal_mapping_correct.2731b486.png"},454:function(t,e,a){"use strict";a.r(e);var s=a(7),n=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"news-pre-0-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#news-pre-0-12"}},[t._v("#")]),t._v(" News (Pre 0.12)")]),t._v(" "),e("h2",{attrs:{id:"pong-working-on-the-web"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#pong-working-on-the-web"}},[t._v("#")]),t._v(" Pong working on the web")]),t._v(" "),e("p",[t._v("This took a little while to figure out. I ended up using wasm-pack to create the wasm as I was having trouble with getting wasm-bindgen to work. I figured it out eventually but decided to keep using wasm-pack as I felt that the workflow would be more friendly to readers.")]),t._v(" "),e("p",[t._v("I would have released this sooner, but I wanted to add support for touch so that people on their phones could play the game. It appears that winit doesn't record touch events for WASM, so I shelved that idea.")]),t._v(" "),e("p",[t._v("If you want to check out the demo, just head over to "),e("RouterLink",{attrs:{to:"/news/showcase/pong/#wasm-support"}},[t._v("the write up")])],1),t._v(" "),e("h2",{attrs:{id:"_0-12-further-changes-to-surface"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-12-further-changes-to-surface"}},[t._v("#")]),t._v(" 0.12 further changes to Surface")]),t._v(" "),e("p",[e("code",[t._v("SwapchainFrame")]),t._v(" is no longer a thing. Instead "),e("code",[t._v("get_current_texture")]),t._v(" will return a "),e("code",[t._v("SurfaceTexture")]),t._v(" directly. This means that getting a frame to draw to looks somethings like this:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Another change is that you must call "),e("code",[t._v("SurfaceTexture::present()")]),t._v(" after you submit your render command buffers to the "),e("code",[t._v("queue")]),t._v(". It goes something like this:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("iter"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\noutput"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("There are a good deal of internal changes such as WebGL support (which I really need to cover). You can check out more on wgpu's "),e("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/blob/master/CHANGELOG.md#wgpu-011-2021-10-07",target:"_blank",rel:"noopener noreferrer"}},[t._v("changelog"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("h2",{attrs:{id:"pong-is-fixed-for-0-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#pong-is-fixed-for-0-10"}},[t._v("#")]),t._v(" Pong is fixed for 0.10")]),t._v(" "),e("p",[t._v("It wasn't actually that hard of a fix. I only really use the swapchain directly in the render module, and the only other change required me to include the "),e("code",[t._v("spirv")]),t._v(" feature to wgpu in Cargo.toml.")]),t._v(" "),e("h2",{attrs:{id:"_0-10-swapchain-is-dead-long-live-the-surface"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-10-swapchain-is-dead-long-live-the-surface"}},[t._v("#")]),t._v(" 0.10 SwapChain is dead, long live the Surface!")]),t._v(" "),e("p",[e("code",[t._v("SwapChain")]),t._v(" and all related code has been removed from wgpu. All code pertaining to obtaining textures to draw to from the window will be available from the "),e("code",[t._v("Surface")]),t._v(" instead. That means configuring "),e("code",[t._v("SurfaceTexture")]),t._v("s will look something like this:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsurface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Resizing the surface will use similar code:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("Finally, getting a "),e("code",[t._v("SurfaceTexture")]),t._v(" to draw to will use the surface directly.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("The Pong and imgui examples are broken again. I may remove the imgui example as the corresponding crate already has examples of how to use it. I'm also considering reworking the Pong example, but I may end up just updating it.")]),t._v(" "),e("h2",{attrs:{id:"pong-and-imgui-demos-are-fixed"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#pong-and-imgui-demos-are-fixed"}},[t._v("#")]),t._v(" Pong and imgui demos are fixed!")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("imgui_wgpu")]),t._v(" and "),e("code",[t._v("wgpu_glyph")]),t._v(" crates have been updated to "),e("code",[t._v("wgpu")]),t._v(" 0.8 so I was able to fix the demos! They both still use GLSL, and I don't think I'll be changing that for now. I may switch them over to "),e("code",[t._v("naga")]),t._v(" at some point.")]),t._v(" "),e("h2",{attrs:{id:"_0-8-and-wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-8-and-wgsl"}},[t._v("#")]),t._v(" 0.8 and WGSL")]),t._v(" "),e("h3",{attrs:{id:"the-glsl-shaders-have-been-translated-to-wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-glsl-shaders-have-been-translated-to-wgsl"}},[t._v("#")]),t._v(" The GLSL shaders have been translated to WGSL")]),t._v(" "),e("p",[t._v("Originally I wanted to wait until the WGSL spec fully stabilized, but due to some issues with the GLSL code, I've decided to switch over the code now. While GLSL is supported by WebGPU, it's currently secondary to WGSL. I'll keep an example of how to use GLSL (and maybe add HLSL and Metal as well), but I'm going to use WGSL from now on.")]),t._v(" "),e("h3",{attrs:{id:"shaderc-has-been-removed"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#shaderc-has-been-removed"}},[t._v("#")]),t._v(" Shaderc has been removed")]),t._v(" "),e("p",[t._v("I've been thinking about doing this for a while now. Because shaderc is a c library, it often has to be redownloaded during builds. This has been slowing down my ability to add new content and maintain old content. I had been considering switching to naga earlier, but some of my shaders (notably the lighting ones) weren't compiling with naga as I was using features not available for compatibility reasons ("),e("code",[t._v("inverse")]),t._v(" is not available in all languages targeting spirv).")]),t._v(" "),e("p",[t._v("Since I needed to make a bunch of changes to the code base to make the glsl, and because I wanted to switch the tutorial to WGSL anyways, I decided to bite the bullet and recode everything in WGSL and remove shaderc from the tutorials.")]),t._v(" "),e("h3",{attrs:{id:"some-of-the-showcase-examples-are-broken"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#some-of-the-showcase-examples-are-broken"}},[t._v("#")]),t._v(" Some of the showcase examples are broken")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("wgpu_glyph")]),t._v(", and "),e("code",[t._v("imgui-wgpu")]),t._v(" crates currently depend on "),e("code",[t._v("wgpu")]),t._v(" 0.7, which is causing the "),e("code",[t._v("pong")]),t._v(" and "),e("code",[t._v("imgui-demo")]),t._v(" to not compile. I decided to exclude them from the workspace until the underlying crates update to using "),e("code",[t._v("wgpu")]),t._v(" 0.8. (Feel free to submit a issue or even PR when that happens!)")]),t._v(" "),e("h3",{attrs:{id:"various-api-changes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#various-api-changes"}},[t._v("#")]),t._v(" Various API changes")]),t._v(" "),e("ul",[e("li",[t._v("The "),e("code",[t._v("depth")]),t._v(" field is now "),e("code",[t._v("depth_or_array_layers")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::VertexFormat::Float3")]),t._v(" is now "),e("code",[t._v("wgpu::VertexFormat::Float32x3")]),t._v(". Similar things apply to "),e("code",[t._v("Float2")]),t._v(" and "),e("code",[t._v("Float4")])]),t._v(" "),e("li",[e("code",[t._v("CullMode")]),t._v(" is no longer a thing, instead "),e("code",[t._v("PrimitiveState::cull_mode")]),t._v(" will require an "),e("code",[t._v("Option")])]),t._v(" "),e("li",[t._v("Added "),e("code",[t._v("clamp_depth")]),t._v(" and "),e("code",[t._v("conservative")]),t._v(" to "),e("code",[t._v("PrimitiveState")]),t._v(". Part of this means that "),e("code",[t._v("DepthStencilState")]),t._v(" no longer has a "),e("code",[t._v("clamp_depth")]),t._v(" field.")]),t._v(" "),e("li",[e("code",[t._v("color_blend")]),t._v(" and "),e("code",[t._v("alpha_blend")]),t._v(" have been moved into the new "),e("code",[t._v("blend")]),t._v(" field with accepts an "),e("code",[t._v("Option")])]),t._v(" "),e("li",[e("code",[t._v("adapter.get_preferred_format()")]),t._v(" now returns an "),e("code",[t._v("Option")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::RenderPassColorAttachmentDescriptor")]),t._v(" has been renamed "),e("code",[t._v("wgpu::RenderPassColorAttachement")]),t._v(" and the "),e("code",[t._v("attachment")]),t._v(" field has been renamed to "),e("code",[t._v("view")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::RenderPassDepthStencialAttachmentDescriptor")]),t._v(" also loses the "),e("code",[t._v("Descriptor")]),t._v(" part of it's name. "),e("code",[t._v("attachment")]),t._v(" gets renamed to "),e("code",[t._v("view")]),t._v(" as well.")]),t._v(" "),e("li",[e("code",[t._v("wgpu::TextureCopyView")]),t._v(" has been renamed to "),e("code",[t._v("wgpu::ImageCopyTexture")]),t._v(". This is a typedef for "),e("code",[t._v("wgpu::ImageCopyTextureBase")])]),t._v(" "),e("li",[e("code",[t._v("wgpu::TextureDataLayout")]),t._v(" is now "),e("code",[t._v("wgpu::ImageDataLayout")]),t._v(" and it's "),e("code",[t._v("bytes_per_row")]),t._v(" and "),e("code",[t._v("rows_per_image")]),t._v(" now take "),e("code",[t._v("NonZeroU32")]),t._v(".")]),t._v(" "),e("li",[e("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(" is now "),e("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"_0-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-7"}},[t._v("#")]),t._v(" 0.7")]),t._v(" "),e("p",[t._v("There were a lot of changes, particularly to the "),e("code",[t._v("RenderPipelineDescriptor")]),t._v(". Most other things have not changed. You can check out the "),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/140",target:"_blank",rel:"noopener noreferrer"}},[t._v("0.9 PR"),e("OutboundLink")],1),t._v(" for the full details.")]),t._v(" "),e("h2",{attrs:{id:"november-2020-cleanup-content-freeze-and-patreon"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#november-2020-cleanup-content-freeze-and-patreon"}},[t._v("#")]),t._v(" November 2020 Cleanup, Content Freeze, and Patreon")]),t._v(" "),e("p",[t._v("School is starting to ramp up, so I haven't had as much time to work on the site as I would like to. Because of that, there were some issues piling up. I decided to tackle a bunch of them in one go. Here's a snapshot of what I did:")]),t._v(" "),e("ul",[e("li",[t._v("The tutorial now handles "),e("code",[t._v("SurfaceError")]),t._v(" properly")]),t._v(" "),e("li",[t._v("I'm now using bytemuck's derive feature on all buffer data structs.")]),t._v(" "),e("li",[t._v("The "),e("a",{attrs:{href:"../beginner/tutorial7-instancing"}},[t._v("instancing tutorial")]),t._v(" now uses vertex buffers instead of storage buffers.")]),t._v(" "),e("li",[e("code",[t._v("build.rs")]),t._v(" now updates when individual shaders are changed, not whenever "),e("code",[t._v("/src")]),t._v(" is changed.")]),t._v(" "),e("li",[t._v("Had some help from Github user @kanerogers to clean up the "),e("a",{attrs:{href:"../beginner/tutorial5-textures"}},[t._v("texturing tutorial")]),t._v(".")]),t._v(" "),e("li",[t._v("I made a "),e("a",{attrs:{href:"../showcase/compute"}},[t._v("compute pipeline showcase")]),t._v(" that computes the tangent and bitangent for each vertex in a model.")]),t._v(" "),e("li",[t._v("I made a "),e("a",{attrs:{href:"../showcase/imgui-demo"}},[t._v("imgui showcase")]),t._v(". It's very basic, but it should be a good starting point.")])]),t._v(" "),e("p",[t._v('Now in the headline, I mentioned a "Content Freeze". Wgpu is still a moving target. The migration from '),e("code",[t._v("0.4")]),t._v(" to "),e("code",[t._v("0.5")]),t._v(" was a lot of work. The same goes for "),e("code",[t._v("0.5")]),t._v(" to "),e("code",[t._v("0.6")]),t._v(". I expect the next migration to be just as much work. As such, I won't be adding much content until the API becomes a bit more stable. That being said, I still plan on resolving any issues with the content.")]),t._v(" "),e("p",[t._v("One more thing. This is actually quite awkward for me (especially since I'll be slowing down development), but I've started a "),e("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),e("OutboundLink")],1),t._v(". My job doesn't give me a ton of hours, so things are a bit tight. You are by no means obligated to donate, but I would appreciate it.")]),t._v(" "),e("p",[t._v("You can find out more about contributing to this project on the "),e("RouterLink",{attrs:{to:"/news/#contribution-and-support"}},[t._v("introduction page")])],1),t._v(" "),e("h2",{attrs:{id:"_0-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-6"}},[t._v("#")]),t._v(" 0.6")]),t._v(" "),e("p",[t._v("This took me way too long. The changes weren't difficult, but I had to do a lot of copy pasting. The main changes are using "),e("code",[t._v("queue.write_buffer()")]),t._v(" and "),e("code",[t._v("queue.write_texture()")]),t._v(" everywhere. I won't get into the nitty gritty, but you can check out the "),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/90",target:"_blank",rel:"noopener noreferrer"}},[t._v("pull request"),e("OutboundLink")],1),t._v(" if you're interested.")]),t._v(" "),e("h2",{attrs:{id:"added-pong-showcase"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#added-pong-showcase"}},[t._v("#")]),t._v(" Added Pong Showcase")]),t._v(" "),e("p",[e("RouterLink",{attrs:{to:"/news/showcase/pong/"}},[t._v("See it here")])],1),t._v(" "),e("h2",{attrs:{id:"normal-mapping"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#normal-mapping"}},[t._v("#")]),t._v(" Normal mapping")]),t._v(" "),e("p",[t._v('My perfectionism got in my way a bit with this one. I wasn\'t sure that what I was getting was "physically accurate", but it seems to look good.')]),t._v(" "),e("p",[e("img",{attrs:{src:a(381),alt:""}})]),t._v(" "),e("h2",{attrs:{id:"_0-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_0-5"}},[t._v("#")]),t._v(" 0.5!")]),t._v(" "),e("p",[t._v("Too many things changed to make note of them here. Check out "),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/29",target:"_blank",rel:"noopener noreferrer"}},[t._v("the 0.5 pull request"),e("OutboundLink")],1),t._v(" if you're curious about specifics. That being said, 2 things are worth mentioning directly: the y-axis now points up like with DirectX and Metal, and requesting an adapter and creating a device now use "),e("code",[t._v("Future")]),t._v("s. The tutorials have been updated as well as the code.")]),t._v(" "),e("h2",{attrs:{id:"reworked-lighting-tutorial"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#reworked-lighting-tutorial"}},[t._v("#")]),t._v(" Reworked lighting tutorial")]),t._v(" "),e("p",[t._v("The "),e("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/"}},[t._v("lighting tutorial")]),t._v(" was not up to par, so I redid it.")],1),t._v(" "),e("h2",{attrs:{id:"added-gif-showcase"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#added-gif-showcase"}},[t._v("#")]),t._v(" Added GIF showcase")]),t._v(" "),e("p",[e("RouterLink",{attrs:{to:"/showcase/gifs/"}},[t._v("Creating GIFs")])],1),t._v(" "),e("h2",{attrs:{id:"updated-texture-tutorials"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updated-texture-tutorials"}},[t._v("#")]),t._v(" Updated texture tutorials")]),t._v(" "),e("p",[t._v("Up to this point, we created textures manually every time. I've pulled out the texture creation code into a new "),e("code",[t._v("texture.rs")]),t._v(" file and included it in every tutorial from the "),e("RouterLink",{attrs:{to:"/beginner/tutorial5-textures/#cleaning-things-up"}},[t._v("textures tutorial")]),t._v(" onward.")],1),t._v(" "),e("h2",{attrs:{id:"fixed-panics-due-to-not-specifying-the-correct-usage"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fixed-panics-due-to-not-specifying-the-correct-usage"}},[t._v("#")]),t._v(" Fixed panics due to not specifying the correct "),e("code",[t._v("usage")])]),t._v(" "),e("p",[t._v("Wgpu has become more strict about what "),e("code",[t._v("BufferUsages")]),t._v("s and "),e("code",[t._v("TextureUsages")]),t._v("s are required when performing certain operations. For example in the "),e("RouterLink",{attrs:{to:"/intermediate/windowless/"}},[t._v("Wgpu without a window example")]),t._v(", the "),e("code",[t._v("texture_desc")]),t._v(" only specified the usage to by "),e("code",[t._v("COPY_SRC")]),t._v(". This caused a crash when the "),e("code",[t._v("texture")]),t._v(" was used as a render target. Adding "),e("code",[t._v("OUTPUT_ATTACHMENT")]),t._v(" fixed the issue.")],1),t._v(" "),e("h2",{attrs:{id:"updating-winit-from-0-20-0-alpha5-to-0-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updating-winit-from-0-20-0-alpha5-to-0-20"}},[t._v("#")]),t._v(" Updating Winit from 0.20.0-alpha5 to 0.20")]),t._v(" "),e("p",[t._v("There were a lot of small changes to how the dpi stuff works. You can see all the changes "),e("a",{attrs:{href:"https://github.com/rust-windowing/winit/blob/master/CHANGELOG.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the changelog"),e("OutboundLink")],1),t._v(". That means that some of the tutorials had to change.")]),t._v(" "),e("ul",[e("li",[t._v("I've removed "),e("code",[t._v("hidpi_factor")]),t._v(" from "),e("code",[t._v("State")]),t._v(" entirely. They removed the "),e("code",[t._v("hidpi_factor()")]),t._v(" method from "),e("code",[t._v("winit::window::Window")]),t._v(", and changed "),e("code",[t._v("inner_size()")]),t._v(" to return "),e("code",[t._v("PhysicalSize")]),t._v(" instead of "),e("code",[t._v("LogicalSize")]),t._v(", so we don't need to store the "),e("code",[t._v("hidpi_factor")]),t._v(" anymore.")]),t._v(" "),e("li",[e("code",[t._v("update_hidpi_and_resize")]),t._v(" is no more. Since "),e("code",[t._v("ScaleFactorChanged")]),t._v(" passes in the windows new "),e("code",[t._v("PhysicalSize")]),t._v(", we can simply use "),e("code",[t._v("resize()")]),t._v(".")]),t._v(" "),e("li",[e("code",[t._v("State::size")]),t._v(" is now "),e("code",[t._v("PhysicalSize")]),t._v(" instead of the pre 0.20 "),e("code",[t._v("LogicalSize")]),t._v(".")]),t._v(" "),e("li",[e("code",[t._v("EventsCleared")]),t._v(" is now "),e("code",[t._v("MainEventsCleared")]),t._v(".")])]),t._v(" "),e("p",[t._v("I may have missed a change, but I made sure that all the examples compile and run, so if you have trouble with your code you can use them as a reference.")]),t._v(" "),e("h2",{attrs:{id:"changed-tutorial-examples-to-use-a-src-directory"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#changed-tutorial-examples-to-use-a-src-directory"}},[t._v("#")]),t._v(" Changed tutorial examples to use a src directory")]),t._v(" "),e("p",[t._v("I wasn't using the traditional cargo binary folder setup. I've changed it to the standardized form now.")]),t._v(" "),e("h2",{attrs:{id:"updating-to-0-4-from-0-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updating-to-0-4-from-0-3"}},[t._v("#")]),t._v(" Updating to 0.4 from 0.3")]),t._v(" "),e("p",[t._v("There are a few things that have changed:")]),t._v(" "),e("ol",[e("li",[t._v("The use of "),e("code",[t._v("Instance")]),t._v(" has been removed. Creating a "),e("code",[t._v("Surface")]),t._v(" and requesting an "),e("code",[t._v("Adapter")]),t._v(" are done as follows.")])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Adapter")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("request")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// needs to be unwrapped")]),t._v("\n")])])]),e("ol",{attrs:{start:"2"}},[e("li",[t._v("The "),e("code",[t._v("request_device")]),t._v(" method now returns a "),e("code",[t._v("(Device, Queue)")]),t._v(" tuple. This means that you can borrow the "),e("code",[t._v("Queue")]),t._v(" mutably while using the "),e("code",[t._v("Device")]),t._v(" immutably. Because of this change, submitting "),e("code",[t._v("CommandBuffer")]),t._v("s to the queue uses the "),e("code",[t._v("submit")]),t._v(" method on the "),e("code",[t._v("Queue")]),t._v(" directly.")])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ol",{attrs:{start:"3"}},[e("li",[t._v("The "),e("code",[t._v("create")]),t._v(" method on "),e("code",[t._v("Surface")]),t._v(" takes in any struct that implements the "),e("code",[t._v("HasRawWindow")]),t._v(" trait, instead of a "),e("code",[t._v("RawWindowHandle")]),t._v(". This means that the "),e("code",[t._v('raw-window-handle = "0.3"')]),t._v(" line in "),e("code",[t._v("Cargo.toml")]),t._v(" is no longer needed.")])]),t._v(" "),e("p",[t._v("I don't know if this is a change from 0.4, but you use "),e("code",[t._v('wgpu = "0.4"')]),t._v(" line in dependencies instead of the "),e("code",[t._v("[dependencies.wgpu]")]),t._v(" as wgpu will determine the best back end for you.")]),t._v(" "),e("h2",{attrs:{id:"new-recent-articles"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#new-recent-articles"}},[t._v("#")]),t._v(" New/Recent Articles")]),t._v(" "),e("RecentArticles")],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/49.15aef418.js b/assets/js/49.ad5a99aa.js similarity index 99% rename from assets/js/49.15aef418.js rename to assets/js/49.ad5a99aa.js index a9bbd3d5..a6627f0b 100644 --- a/assets/js/49.15aef418.js +++ b/assets/js/49.ad5a99aa.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{388:function(t,s,a){t.exports=a.p+"assets/img/output.5ed23d6e.gif"},460:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"creating-gifs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#creating-gifs"}},[t._v("#")]),t._v(" Creating gifs")]),t._v(" "),s("p",[t._v("Sometimes you've created a nice simulation/animation, and you want to show it off. While you can record a video, that might be a bit overkill to break out your video recording if you just want something to post on Twitter. That's where what "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/GIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("GIF"),s("OutboundLink")],1),t._v("s are for.")]),t._v(" "),s("p",[t._v("Also, GIF is pronounced GHIF, not JIF as JIF is not only "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/Jif_%28peanut_butter%29",target:"_blank",rel:"noopener noreferrer"}},[t._v("peanut butter"),s("OutboundLink")],1),t._v(", it is also a "),s("a",{attrs:{href:"https://filext.com/file-extension/JIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("different image format"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"how-are-we-making-the-gif"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-are-we-making-the-gif"}},[t._v("#")]),t._v(" How are we making the GIF?")]),t._v(" "),s("p",[t._v("We're going to create a function using the "),s("a",{attrs:{href:"https://docs.rs/gif/",target:"_blank",rel:"noopener noreferrer"}},[t._v("gif crate"),s("OutboundLink")],1),t._v(" to encode the actual image.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("save_gif")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("failure"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("gif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SetParameter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("File")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Infinite")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" frames "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_rgba_speed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),t._v(" "),s("p",[t._v("All we need to use this code is the frames of the GIF, how fast it should run, and the size of the GIF (you could use width and height separately, but I didn't).")]),t._v(" "),s("h2",{attrs:{id:"how-do-we-make-the-frames"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-make-the-frames"}},[t._v("#")]),t._v(" How do we make the frames?")]),t._v(" "),s("p",[t._v("If you checked out the "),s("RouterLink",{attrs:{to:"/showcase/windowless/#a-triangle-without-a-window"}},[t._v("windowless showcase")]),t._v(", you'll know that we render directly to a "),s("code",[t._v("wgpu::Texture")]),t._v(". We'll create a texture to render to and a buffer to copy the output to.")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a texture to render to")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rt_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("framework"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_descriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rt_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu requires texture -> buffer copies to be aligned using")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu::COPY_BYTES_PER_ROW_ALIGNMENT. Because of this we'll")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// need to save both the padded_bytes_per_row as well as the")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unpadded_bytes_per_row")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pixel_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" align "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_BYTES_PER_ROW_ALIGNMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pixel_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padding "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("align "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a buffer to copy the texture to so we can get the data")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" buffer_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Output Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that, we can render a frame, and then copy that frame to a "),s("code",[t._v("Vec")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("colors "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" rpass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"GIF Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n rpass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rpass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rpass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" padded_bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the map request")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" request "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wait for the GPU to finish")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" padded_data\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("chunk"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("chunk"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flatten")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Something went wrong"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Once that's done we can pass our frames into "),s("code",[t._v("save_gif()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("save_gif")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"output.gif"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("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.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(388),alt:"./output.gif"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{382:function(t,s,a){t.exports=a.p+"assets/img/output.5ed23d6e.gif"},457:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"creating-gifs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#creating-gifs"}},[t._v("#")]),t._v(" Creating gifs")]),t._v(" "),s("p",[t._v("Sometimes you've created a nice simulation/animation, and you want to show it off. While you can record a video, that might be a bit overkill to break out your video recording if you just want something to post on Twitter. That's where what "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/GIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("GIF"),s("OutboundLink")],1),t._v("s are for.")]),t._v(" "),s("p",[t._v("Also, GIF is pronounced GHIF, not JIF as JIF is not only "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/Jif_%28peanut_butter%29",target:"_blank",rel:"noopener noreferrer"}},[t._v("peanut butter"),s("OutboundLink")],1),t._v(", it is also a "),s("a",{attrs:{href:"https://filext.com/file-extension/JIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("different image format"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"how-are-we-making-the-gif"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-are-we-making-the-gif"}},[t._v("#")]),t._v(" How are we making the GIF?")]),t._v(" "),s("p",[t._v("We're going to create a function using the "),s("a",{attrs:{href:"https://docs.rs/gif/",target:"_blank",rel:"noopener noreferrer"}},[t._v("gif crate"),s("OutboundLink")],1),t._v(" to encode the actual image.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("save_gif")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("failure"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("gif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SetParameter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("File")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Infinite")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" frames "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_rgba_speed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),t._v(" "),s("p",[t._v("All we need to use this code is the frames of the GIF, how fast it should run, and the size of the GIF (you could use width and height separately, but I didn't).")]),t._v(" "),s("h2",{attrs:{id:"how-do-we-make-the-frames"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-make-the-frames"}},[t._v("#")]),t._v(" How do we make the frames?")]),t._v(" "),s("p",[t._v("If you checked out the "),s("RouterLink",{attrs:{to:"/showcase/windowless/#a-triangle-without-a-window"}},[t._v("windowless showcase")]),t._v(", you'll know that we render directly to a "),s("code",[t._v("wgpu::Texture")]),t._v(". We'll create a texture to render to and a buffer to copy the output to.")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a texture to render to")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rt_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_target "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("framework"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_descriptor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rt_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu requires texture -> buffer copies to be aligned using")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu::COPY_BYTES_PER_ROW_ALIGNMENT. Because of this we'll")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// need to save both the padded_bytes_per_row as well as the")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unpadded_bytes_per_row")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pixel_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" align "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_BYTES_PER_ROW_ALIGNMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pixel_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padding "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("align "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a buffer to copy the texture to so we can get the data")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" buffer_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Output Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("With that, we can render a frame, and then copy that frame to a "),s("code",[t._v("Vec")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("colors "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" rpass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"GIF Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n rpass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rpass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rpass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" padded_bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the map request")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" request "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wait for the GPU to finish")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" padded_data\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("chunk"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("chunk"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("unpadded_bytes_per_row "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flatten")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Something went wrong"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Once that's done we can pass our frames into "),s("code",[t._v("save_gif()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("save_gif")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"output.gif"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("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.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(382),alt:"./output.gif"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/50.abb1e2cb.js b/assets/js/50.05fd19ce.js similarity index 99% rename from assets/js/50.abb1e2cb.js rename to assets/js/50.05fd19ce.js index 887a25b2..ed3c9fa1 100644 --- a/assets/js/50.abb1e2cb.js +++ b/assets/js/50.05fd19ce.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{386:function(t,s,a){t.exports=a.p+"assets/img/screenshot.1f9dab62.png"},458:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"basic-imgui-demo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-imgui-demo"}},[t._v("#")]),t._v(" Basic Imgui Demo")]),t._v(" "),s("div",{staticClass:"warning"},[s("p",[t._v("This example is currently broken. It got behind when I was migrating the tutorial to 0.8 as the imgui_wgpu crate was still on 0.7 at the time. I haven't updated it since. While fixing it wouldn't be too hard (feel free to send a PR), I'm considering removing this example entirely.")]),t._v(" "),s("p",[t._v("This tutorial is focused on how to use wgpu (and by extension the WebGPU standard). I'm looking to minimize the amount of wgpu-adjacent crates that I'm using. They can get in the way of keeping this tutorial as current as possible, and often a crate I'm using will have a different version of wgpu (or winit as is the case as of writing) preventing me from continuing with migration. Beyond dependency conflicts, I'd like to cover some of the topics that some of the existing crates implement such as text and guis.")]),t._v(" "),s("p",[t._v("For the 0.10 migration, I'll keep this example in and keep the showcase code excluded.")])]),t._v(" "),s("p",[t._v("This is not an in-depth guide on how to use Imgui. But here are some of the basics you'll need to get started. We'll need to import "),s("a",{attrs:{href:"https://docs.rs/imgui",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-rs"),s("OutboundLink")],1),t._v(", "),s("a",{attrs:{href:"https://docs.rs/imgui-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-wgpu"),s("OutboundLink")],1),t._v(", and "),s("a",{attrs:{href:"https://docs.rs/imgui-winit-support",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-winit-support"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-winit-support")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("I've excluded some dependencies for brevity. I'm also using the "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/framework",target:"_blank",rel:"noopener noreferrer"}},[t._v("framework crate"),s("OutboundLink")],1),t._v(" I've created for showcases to simplify setup. If you see a "),s("code",[t._v("display")]),t._v(" variable in code, it's from the "),s("code",[t._v("framework")]),t._v(". "),s("code",[t._v("Display")]),t._v(" is where the "),s("code",[t._v("device")]),t._v(", "),s("code",[t._v("queue")]),t._v(", "),s("code",[t._v("swap_chain")]),t._v(", and other basic wgpu objects are stored.")])]),t._v(" "),s("p",[t._v("We need to set up imgui and a "),s("code",[t._v("WinitPlatform")]),t._v(" to get started. Do this after creating you're "),s("code",[t._v("winit::Window")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" platform "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WinitPlatform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nplatform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach_window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HiDpiMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_ini_filename")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we need to configure the default font. We'll be using the window's scale factor to keep things from being too big or small.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" hidpi_factor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("scale_factor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" font_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("13.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" hidpi_factor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("font_global_scale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" hidpi_factor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fonts")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_font")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultFontData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontConfig")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n oversample_h"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pixel_snap_h"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size_pixels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" font_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Then you need to create the renderer. We need to use the surface's "),s("code",[t._v("TextureFormat")]),t._v(" in order for things to work properly.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer_config "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RendererConfig")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Renderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderer_config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("When we update the scene, we'll need to update imgui.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_delta_time")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dt: std::time::Duration")]),t._v("\n")])])]),s("p",[t._v("I'm not an expert with imgui, so I'll let the code speak for itself.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Build the UI")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to prepare frame!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ui "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello Imgui from WGPU!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n window\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstUseEver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello world!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"This is a demo of imgui-rs using imgui-wgpu!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("separator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mouse_pos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Mouse Position: ({:.1}, {:.1})"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prepare to render")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("swap_chain"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Error getting frame: {:?}"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the scene")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canvas"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the UI")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"UI RenderPass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("renderer\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to render UI!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ndisplay"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("That's all there is to it. Here's a picture of the results!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(386),alt:"./screenshot.png"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{387:function(t,s,a){t.exports=a.p+"assets/img/screenshot.1f9dab62.png"},459:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"basic-imgui-demo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-imgui-demo"}},[t._v("#")]),t._v(" Basic Imgui Demo")]),t._v(" "),s("div",{staticClass:"warning"},[s("p",[t._v("This example is currently broken. It got behind when I was migrating the tutorial to 0.8 as the imgui_wgpu crate was still on 0.7 at the time. I haven't updated it since. While fixing it wouldn't be too hard (feel free to send a PR), I'm considering removing this example entirely.")]),t._v(" "),s("p",[t._v("This tutorial is focused on how to use wgpu (and by extension the WebGPU standard). I'm looking to minimize the amount of wgpu-adjacent crates that I'm using. They can get in the way of keeping this tutorial as current as possible, and often a crate I'm using will have a different version of wgpu (or winit as is the case as of writing) preventing me from continuing with migration. Beyond dependency conflicts, I'd like to cover some of the topics that some of the existing crates implement such as text and guis.")]),t._v(" "),s("p",[t._v("For the 0.10 migration, I'll keep this example in and keep the showcase code excluded.")])]),t._v(" "),s("p",[t._v("This is not an in-depth guide on how to use Imgui. But here are some of the basics you'll need to get started. We'll need to import "),s("a",{attrs:{href:"https://docs.rs/imgui",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-rs"),s("OutboundLink")],1),t._v(", "),s("a",{attrs:{href:"https://docs.rs/imgui-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-wgpu"),s("OutboundLink")],1),t._v(", and "),s("a",{attrs:{href:"https://docs.rs/imgui-winit-support",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-winit-support"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-winit-support")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("I've excluded some dependencies for brevity. I'm also using the "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/framework",target:"_blank",rel:"noopener noreferrer"}},[t._v("framework crate"),s("OutboundLink")],1),t._v(" I've created for showcases to simplify setup. If you see a "),s("code",[t._v("display")]),t._v(" variable in code, it's from the "),s("code",[t._v("framework")]),t._v(". "),s("code",[t._v("Display")]),t._v(" is where the "),s("code",[t._v("device")]),t._v(", "),s("code",[t._v("queue")]),t._v(", "),s("code",[t._v("swap_chain")]),t._v(", and other basic wgpu objects are stored.")])]),t._v(" "),s("p",[t._v("We need to set up imgui and a "),s("code",[t._v("WinitPlatform")]),t._v(" to get started. Do this after creating you're "),s("code",[t._v("winit::Window")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" platform "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WinitPlatform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nplatform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach_window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HiDpiMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_ini_filename")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now we need to configure the default font. We'll be using the window's scale factor to keep things from being too big or small.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" hidpi_factor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("scale_factor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" font_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("13.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" hidpi_factor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("font_global_scale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" hidpi_factor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fonts")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_font")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontSource")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultFontData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontConfig")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n oversample_h"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pixel_snap_h"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size_pixels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" font_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Then you need to create the renderer. We need to use the surface's "),s("code",[t._v("TextureFormat")]),t._v(" in order for things to work properly.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer_config "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RendererConfig")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Renderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderer_config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("When we update the scene, we'll need to update imgui.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_delta_time")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dt: std::time::Duration")]),t._v("\n")])])]),s("p",[t._v("I'm not an expert with imgui, so I'll let the code speak for itself.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Build the UI")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to prepare frame!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ui "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("frame")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello Imgui from WGPU!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n window\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstUseEver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello world!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"This is a demo of imgui-rs using imgui-wgpu!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("separator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mouse_pos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("io")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Mouse Position: ({:.1}, {:.1})"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prepare to render")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("swap_chain"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Error getting frame: {:?}"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the scene")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canvas"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the UI")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"UI RenderPass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("renderer\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ui"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to render UI!"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ndisplay"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("That's all there is to it. Here's a picture of the results!")]),t._v(" "),s("p",[s("img",{attrs:{src:a(387),alt:"./screenshot.png"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/51.f9c8041f.js b/assets/js/51.47410096.js similarity index 99% rename from assets/js/51.f9c8041f.js rename to assets/js/51.47410096.js index 5a9abeb7..4025eb91 100644 --- a/assets/js/51.f9c8041f.js +++ b/assets/js/51.47410096.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{387:function(A,t){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAIAAABnsVYUAAAAA3NCSVQICAjb4U/gAAAAGXRFWHRTb2Z0d2FyZQBnbm9tZS1zY3JlZW5zaG907wO/PgAAGrRJREFUeJzs3ctqQkEQQEE7+P+/PFkEgoKGED0ZH1Wri4j0QqQ5DOPhAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI9pdg8AwN+ttS6+PuPnHQAADofrO/Mp+zNA52P3AAAAAAAAvCYBGgAAAACAhAANAAAAAEDCJUcAT8YddgAA8LPTnfnabuz/VAD+hxPQAAAAAAAkBGgAAAAAABICNAAAAAAACRcbATwx99YBAMCXW3ZjezVAxwloAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAxHH3AAAAAAC3mpnv57XWxefT9/zmcwC4nRPQAAAAAAAkBGgAAAAAABICNAAAAAAACRcbATyB03vrbuE+OwAA3s1vdml7MkDHCWgAAAAAABICNAAAAAAACQEaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgHc3uAQAAAACA+1tr7R7hzIwU+Y4+dg8AAAAAAMBrEqABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgcdw/AHmut3SOcmZndIwAAAAAAd+YENAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASBx3DwAAd7DW2j3CQ5uZ3SMAAADwjpyABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABKzewD2WGvtHuHMjK8iAAAAALwaJ6ABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBne3BAAgAAACDo/+t2BCoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADARnUXMiKE+bnlAAAAAElFTkSuQmCC"},459:function(A,t,s){"use strict";s.r(t);var a=s(7),n=Object(a.a)({},(function(){var A=this,t=A._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":A.$parent.slotKey}},[t("h1",{attrs:{id:"pong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pong"}},[A._v("#")]),A._v(" Pong")]),A._v(" "),t("p",[t("img",{attrs:{src:s(387),alt:"A screenshot of pong"}})]),A._v(" "),t("p",[A._v('Practically the "Hello World!" of games. Pong has been remade thousands of times. I know Pong. You know Pong. We all know Pong. That being said, this time I wanted to put in a little more effort than most people do. This showcase has a basic menu system, sounds, and different game states.')]),A._v(" "),t("p",[A._v("The architecture is not the best as I prescribed to the \"get things done\" mentality. If I were to redo this project, I'd change a lot of things. Regardless, let's get into the postmortem.")]),A._v(" "),t("h2",{attrs:{id:"the-architecture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-architecture"}},[A._v("#")]),A._v(" The Architecture")]),A._v(" "),t("p",[A._v("I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.")]),A._v(" "),t("p",[A._v("I had a "),t("code",[A._v("State")]),A._v(" class with all of the objects in the scene. This included the ball and the paddles, as well as the text for the scores and even the menu. "),t("code",[A._v("State")]),A._v(" also included a "),t("code",[A._v("game_state")]),A._v(" field of type "),t("code",[A._v("GameState")]),A._v(".")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Copy, Clone, Eq, PartialEq)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("GameState")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The "),t("code",[A._v("State")]),A._v(" class didn't have any methods on it as I was taking a more data-oriented approach. Instead, I created a "),t("code",[A._v("System")]),A._v(" trait and created multiple structs that implemented it.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("trait")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("System")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[allow(unused_variables)]")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Event")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The systems would be in charge of controlling updating the different objects' states (position, visibility, etc), as well as updating the "),t("code",[A._v("game_state")]),A._v(" field. I created all the systems on startup and used a "),t("code",[A._v("match")]),A._v(" on "),t("code",[A._v("game_state")]),A._v(" to determine which ones should be allowed to run (the "),t("code",[A._v("visiblity_system")]),A._v(" always runs as it is always needed).")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[A._v("visiblity_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n ball_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("It's definitely not the cleanest code, but it works.")]),A._v(" "),t("p",[A._v("I ended up having 6 systems in total.")]),A._v(" "),t("ol",[t("li",[t("p",[A._v("I added the "),t("code",[A._v("VisibilitySystem")]),A._v(" near the end of development. Up to that point, all the systems had to set the "),t("code",[A._v("visible")]),A._v(" field of the objects. That was a pain and cluttered the logic. Instead, I decided to create the "),t("code",[A._v("VisiblitySystem")]),A._v(" to handle that.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("MenuSystem")]),A._v(" handled controlling what text was focused, and what would happen when the user pressed the enter key. If the "),t("code",[A._v("Play")]),A._v(" button was focused, pressing enter would change "),t("code",[A._v("game_state")]),A._v(" to "),t("code",[A._v("GameState::Serving")]),A._v(" which would start the game. The "),t("code",[A._v("Quit")]),A._v(" button would shift to "),t("code",[A._v("GameState::Quiting")]),A._v(".")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("ServingSystem")]),A._v(" sets the ball's position to "),t("code",[A._v("(0.0, 0.0)")]),A._v(", updates the score texts, and shifts into "),t("code",[A._v("GameState::Playing")]),A._v(" after a timer.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("PlaySystem")]),A._v(" controls the players. It allows them to move and keeps them from leaving the play space. This system runs on both "),t("code",[A._v("GameState::Playing")]),A._v(" as well as "),t("code",[A._v("GameState::Serving")]),A._v(". I did this to allow the players to reposition themselves before the serve. The "),t("code",[A._v("PlaySystem")]),A._v(" also will shift into "),t("code",[A._v("GameState::GameOver")]),A._v(" when one of the players' scores is greater than 2.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("BallSystem")]),A._v(" system controls the ball's movement as well as its bouncing of walls/players. It also updates the score and shifts to "),t("code",[A._v("GameState::Serving")]),A._v(" when the ball goes off the side of the screen.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("GameOver")]),A._v(" system updates the "),t("code",[A._v("win_text")]),A._v(" and shifts to "),t("code",[A._v("GameState::MainMenu")]),A._v(" after a delay.")])])]),A._v(" "),t("p",[A._v("I found the system approach quite nice to work with. My implementation wasn't the best, but I would like to work with it again. I might even implement my own ECS.")]),A._v(" "),t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[A._v("#")]),A._v(" Input")]),A._v(" "),t("p",[A._v("The "),t("code",[A._v("System")]),A._v(" trait, originally had a "),t("code",[A._v("process_input")]),A._v(" method. This became a problem when I was implementing allowing players to move between serves. The players would get stuck when the "),t("code",[A._v("game_state")]),A._v(" switched from "),t("code",[A._v("Serving")]),A._v(" to "),t("code",[A._v("Playing")]),A._v(" as the inputs were getting stuck. I only called "),t("code",[A._v("process_input")]),A._v(" on systems that were currently in use. Changing that would be finicky, so I decided to move all the input code into its own struct.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("event"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Default)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Input")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_up_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_down_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_up_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_down_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" enter_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Default")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("default")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" key"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" key "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Up")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Down")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("W")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("S")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Return")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("enter_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n _ "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_up_pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_down_pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("This works really well. I simply pass this struct into the "),t("code",[A._v("update_state")]),A._v(" method.")]),A._v(" "),t("h2",{attrs:{id:"render"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[A._v("#")]),A._v(" Render")]),A._v(" "),t("p",[A._v("I used "),t("a",{attrs:{href:"https://docs.rs/wgpu_glyph",target:"_blank",rel:"noopener noreferrer"}},[A._v("wgpu_glyph"),t("OutboundLink")],1),A._v(" for the text and white quads for the ball and paddles. There's not much to say here, it's Pong after all.")]),A._v(" "),t("p",[A._v("I did mess around with batching, however. It was totally overkill for this project, but it was a good learning experience. Here's the code if you're interested.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_ball")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ball")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_player")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Player")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("3")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("build")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wgpu"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Device")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("len")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("as")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("h2",{attrs:{id:"sound"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sound"}},[A._v("#")]),A._v(" Sound")]),A._v(" "),t("p",[A._v("I used "),t("a",{attrs:{href:"https://docs.rs/rodio",target:"_blank",rel:"noopener noreferrer"}},[A._v("rodio"),t("OutboundLink")],1),A._v(" for sound. I created a "),t("code",[A._v("SoundPack")]),A._v(" class to store the sounds. Deciding how to get the sounds to play took some thinking. I chose to pass in a "),t("code",[A._v("Vec")]),A._v(" into the "),t("code",[A._v("update_state")]),A._v(" method. The system would then push an event to the "),t("code",[A._v("Vec")]),A._v(". The "),t("code",[A._v("Event")]),A._v(" enum is listed below.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Copy, Clone)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Event")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ButtonPressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("FocusChanged")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("BallBounce")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cgmath"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vector2")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Score")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("I was going to have "),t("code",[A._v("BallBounce")]),A._v(" play a positioned sound using a "),t("code",[A._v("SpatialSink")]),A._v(", but I was getting clipping issues, and I wanted to be done with the project. Aside from that, the events system worked nicely.")]),A._v(" "),t("h2",{attrs:{id:"wasm-support"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wasm-support"}},[A._v("#")]),A._v(" WASM Support")]),A._v(" "),t("p",[A._v("This example works on the web, but there are a few steps that I needed to take to make things work. The first one was that I needed to switch to using a "),t("code",[A._v("lib.rs")]),A._v(" instead of just "),t("code",[A._v("main.rs")]),A._v(". I opted to use "),t("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[A._v("wasm-pack"),t("OutboundLink")],1),A._v(" to create the web assembly. I could have kept the old format by using wasm-bindgen directly, but I ran into issues with using the wrong version of wasm-bindgen, so I elected to stick with wasm-pack.")]),A._v(" "),t("p",[A._v("In order for wasm-pack to work properly I first needed to add some dependencies:")]),A._v(" "),t("div",{staticClass:"language-toml[dependencies] extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[A._v('cfg-if = "1"\nenv_logger = "0.10"\nwinit = "0.28"\nanyhow = "1.0"\nbytemuck = { version = "1.12", features = [ "derive" ] }\ncgmath = "0.18"\npollster = "0.3"\nwgpu = { version = "0.18", features = ["spirv"]}\nwgpu_glyph = "0.18"\nrand = "0.8"\nrodio = { version = "0.15", default-features = false, features = ["wav"] }\nlog = "0.4"\ninstant = "0.1"\n\n[target.\'cfg(target_arch = "wasm32")\'.dependencies]\nconsole_error_panic_hook = "0.1.6"\nconsole_log = "1.0"\ngetrandom = { version = "0.2", features = ["js"] }\nrodio = { version = "0.15", default-features = false, features = ["wasm-bindgen", "wav"] }\nwasm-bindgen-futures = "0.4.20"\nwasm-bindgen = "=0.2.87"\nweb-sys = { version = "0.3.53", features = [\n "Document",\n "Window",\n "Element",\n]}\nwgpu = { version = "0.18", features = ["spirv", "webgl"]}\n\n[build-dependencies]\nanyhow = "1.0"\nfs_extra = "1.2"\nglob = "0.3"\nrayon = "1.4"\nnaga = { version = "0.9", features = ["glsl-in", "spv-out", "wgsl-out"]}\n\n')])])]),t("p",[A._v("I'll highlight a few of these:")]),A._v(" "),t("ul",[t("li",[A._v("rand: If you want to use rand on the web, you need to include getrandom directly and enable its "),t("code",[A._v("js")]),A._v(" feature.")]),A._v(" "),t("li",[A._v("rodio: I had to disable all of the features for the WASM build, and then enabled them separately. The "),t("code",[A._v("mp3")]),A._v(" feature specifically wasn't working for me. There might have been a workaround, but since I'm not using mp3 in this example I just elected to only use wav.")]),A._v(" "),t("li",[A._v("instant: This crate is basically just a wrapper around "),t("code",[A._v("std::time::Instant")]),A._v(". In a normal build, it's just a type alias. In web builds it uses the browser's time functions.")]),A._v(" "),t("li",[A._v("cfg-if: This is a convenient crate for making platform-specific code less horrible to write.")]),A._v(" "),t("li",[A._v("env_logger and console_log: env_logger doesn't work on web assembly so we need to use a different logger. console_log is the one used in the web assembly tutorials, so I went with that one.")]),A._v(" "),t("li",[A._v("wasm-bindgen: This crate is the glue that makes Rust code work on the web. If you are building using the wasm-bindgen command you need to make sure that the command version of wasm-bindgen matches the version in Cargo.toml "),t("strong",[A._v("exactly")]),A._v(" otherwise you'll have problems. If you use wasm-pack it will download the appropriate wasm-bindgen binary to use for your crate.")]),A._v(" "),t("li",[A._v('web-sys: This has functions and types that allow you to use different methods available in js such as "getElementById()".')])]),A._v(" "),t("p",[A._v("Now that that's out of the way let's talk about some code. First, we need to create a function that will start our event loop.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch="),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wasm_bindgen"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("prelude"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg_attr(target_arch="),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(", wasm_bindgen(start))]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Snipped...")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The "),t("code",[A._v("wasm_bindgen(start)")]),A._v(" tell's wasm-bindgen that this function should be started as soon as the web assembly module is loaded by javascript. Most of the code inside this function is the same as what you'd find in other examples on this site, but there is some specific stuff we need to do on the web.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cfg_if"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token macro property"}},[A._v("cfg_if!")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_log"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("init_with_level")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("log"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Level")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Warn")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Could\'t initialize logger"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("std"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("panic"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_hook")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Box")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_error_panic_hook"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),A._v("hook"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("env_logger"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("init")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("This code should run before you try to do anything significant. It sets up the logger based on what architecture you're building for. Most architectures will use "),t("code",[A._v("env_logger")]),A._v(". The "),t("code",[A._v("wasm32")]),A._v(" architecture will use "),t("code",[A._v("console_log")]),A._v(". It's also important that we tell Rust to forward panics to javascript. If we didn't do this we would have no idea when our Rust code panics.")]),A._v(" "),t("p",[A._v("Next, we create a window. Much of it is like we've done before, but since we are supporting fullscreen we need to do some extra steps.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" event_loop "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("EventLoop")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" monitor "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" event_loop"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("primary_monitor")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" video_mode "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" monitor"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("video_modes")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("next")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" size "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" video_mode"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("clone")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("map_or")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("800")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("600")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" vm"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" window "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowBuilder")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_visible")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_title")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Pong"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("video_mode"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("map")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Exclusive")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("build")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("event_loop"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// WASM builds don't have access to monitor information, so")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// we should specify a fallback resolution")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("is_none")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_inner_size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("We then have to do some web-specific stuff if we are on that platform.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("platform"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("web"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowExtWebSys")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("window")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("win"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" win"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("document")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("doc"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" dst "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" doc"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("get_element_by_id")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm-example"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" canvas "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Element")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("from")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("canvas")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n dst"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("append_child")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("canvas"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("ok")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Request fullscreen, if denied, continue as normal")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" canvas"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("request_fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ok")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Err")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Some")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Couldn\'t append canvas to document body."')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("Everything else works the same.")]),A._v(" "),t("h2",{attrs:{id:"summary"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#summary"}},[A._v("#")]),A._v(" Summary")]),A._v(" "),t("p",[A._v("A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.")]),A._v(" "),t("p",[A._v("Try the code down below! (Controls currently require a keyboard.)")]),A._v(" "),t("WasmExample",{attrs:{example:"pong"}})],1)}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{388:function(A,t){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAIAAABnsVYUAAAAA3NCSVQICAjb4U/gAAAAGXRFWHRTb2Z0d2FyZQBnbm9tZS1zY3JlZW5zaG907wO/PgAAGrRJREFUeJzs3ctqQkEQQEE7+P+/PFkEgoKGED0ZH1Wri4j0QqQ5DOPhAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI9pdg8AwN+ttS6+PuPnHQAADofrO/Mp+zNA52P3AAAAAAAAvCYBGgAAAACAhAANAAAAAEDCJUcAT8YddgAA8LPTnfnabuz/VAD+hxPQAAAAAAAkBGgAAAAAABICNAAAAAAACRcbATwx99YBAMCXW3ZjezVAxwloAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAxHH3AAAAAAC3mpnv57XWxefT9/zmcwC4nRPQAAAAAAAkBGgAAAAAABICNAAAAAAACRcbATyB03vrbuE+OwAA3s1vdml7MkDHCWgAAAAAABICNAAAAAAACQEaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgHc3uAQAAAACA+1tr7R7hzIwU+Y4+dg8AAAAAAMBrEqABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgcdw/AHmut3SOcmZndIwAAAAAAd+YENAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASBx3DwAAd7DW2j3CQ5uZ3SMAAADwjpyABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABKzewD2WGvtHuHMjK8iAAAAALwaJ6ABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBne3BAAgAAACDo/+t2BCoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADARnUXMiKE+bnlAAAAAElFTkSuQmCC"},461:function(A,t,s){"use strict";s.r(t);var a=s(7),n=Object(a.a)({},(function(){var A=this,t=A._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":A.$parent.slotKey}},[t("h1",{attrs:{id:"pong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pong"}},[A._v("#")]),A._v(" Pong")]),A._v(" "),t("p",[t("img",{attrs:{src:s(388),alt:"A screenshot of pong"}})]),A._v(" "),t("p",[A._v('Practically the "Hello World!" of games. Pong has been remade thousands of times. I know Pong. You know Pong. We all know Pong. That being said, this time I wanted to put in a little more effort than most people do. This showcase has a basic menu system, sounds, and different game states.')]),A._v(" "),t("p",[A._v("The architecture is not the best as I prescribed to the \"get things done\" mentality. If I were to redo this project, I'd change a lot of things. Regardless, let's get into the postmortem.")]),A._v(" "),t("h2",{attrs:{id:"the-architecture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-architecture"}},[A._v("#")]),A._v(" The Architecture")]),A._v(" "),t("p",[A._v("I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.")]),A._v(" "),t("p",[A._v("I had a "),t("code",[A._v("State")]),A._v(" class with all of the objects in the scene. This included the ball and the paddles, as well as the text for the scores and even the menu. "),t("code",[A._v("State")]),A._v(" also included a "),t("code",[A._v("game_state")]),A._v(" field of type "),t("code",[A._v("GameState")]),A._v(".")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Copy, Clone, Eq, PartialEq)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("GameState")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The "),t("code",[A._v("State")]),A._v(" class didn't have any methods on it as I was taking a more data-oriented approach. Instead, I created a "),t("code",[A._v("System")]),A._v(" trait and created multiple structs that implemented it.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("trait")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("System")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[allow(unused_variables)]")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Event")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The systems would be in charge of controlling updating the different objects' states (position, visibility, etc), as well as updating the "),t("code",[A._v("game_state")]),A._v(" field. I created all the systems on startup and used a "),t("code",[A._v("match")]),A._v(" on "),t("code",[A._v("game_state")]),A._v(" to determine which ones should be allowed to run (the "),t("code",[A._v("visiblity_system")]),A._v(" always runs as it is always needed).")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[A._v("visiblity_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n ball_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("It's definitely not the cleanest code, but it works.")]),A._v(" "),t("p",[A._v("I ended up having 6 systems in total.")]),A._v(" "),t("ol",[t("li",[t("p",[A._v("I added the "),t("code",[A._v("VisibilitySystem")]),A._v(" near the end of development. Up to that point, all the systems had to set the "),t("code",[A._v("visible")]),A._v(" field of the objects. That was a pain and cluttered the logic. Instead, I decided to create the "),t("code",[A._v("VisiblitySystem")]),A._v(" to handle that.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("MenuSystem")]),A._v(" handled controlling what text was focused, and what would happen when the user pressed the enter key. If the "),t("code",[A._v("Play")]),A._v(" button was focused, pressing enter would change "),t("code",[A._v("game_state")]),A._v(" to "),t("code",[A._v("GameState::Serving")]),A._v(" which would start the game. The "),t("code",[A._v("Quit")]),A._v(" button would shift to "),t("code",[A._v("GameState::Quiting")]),A._v(".")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("ServingSystem")]),A._v(" sets the ball's position to "),t("code",[A._v("(0.0, 0.0)")]),A._v(", updates the score texts, and shifts into "),t("code",[A._v("GameState::Playing")]),A._v(" after a timer.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("PlaySystem")]),A._v(" controls the players. It allows them to move and keeps them from leaving the play space. This system runs on both "),t("code",[A._v("GameState::Playing")]),A._v(" as well as "),t("code",[A._v("GameState::Serving")]),A._v(". I did this to allow the players to reposition themselves before the serve. The "),t("code",[A._v("PlaySystem")]),A._v(" also will shift into "),t("code",[A._v("GameState::GameOver")]),A._v(" when one of the players' scores is greater than 2.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("BallSystem")]),A._v(" system controls the ball's movement as well as its bouncing of walls/players. It also updates the score and shifts to "),t("code",[A._v("GameState::Serving")]),A._v(" when the ball goes off the side of the screen.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("GameOver")]),A._v(" system updates the "),t("code",[A._v("win_text")]),A._v(" and shifts to "),t("code",[A._v("GameState::MainMenu")]),A._v(" after a delay.")])])]),A._v(" "),t("p",[A._v("I found the system approach quite nice to work with. My implementation wasn't the best, but I would like to work with it again. I might even implement my own ECS.")]),A._v(" "),t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[A._v("#")]),A._v(" Input")]),A._v(" "),t("p",[A._v("The "),t("code",[A._v("System")]),A._v(" trait, originally had a "),t("code",[A._v("process_input")]),A._v(" method. This became a problem when I was implementing allowing players to move between serves. The players would get stuck when the "),t("code",[A._v("game_state")]),A._v(" switched from "),t("code",[A._v("Serving")]),A._v(" to "),t("code",[A._v("Playing")]),A._v(" as the inputs were getting stuck. I only called "),t("code",[A._v("process_input")]),A._v(" on systems that were currently in use. Changing that would be finicky, so I decided to move all the input code into its own struct.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("event"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Default)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Input")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_up_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_down_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_up_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_down_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" enter_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Default")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("default")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" key"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" key "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Up")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Down")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("W")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("S")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Return")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("enter_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n _ "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_up_pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_down_pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("This works really well. I simply pass this struct into the "),t("code",[A._v("update_state")]),A._v(" method.")]),A._v(" "),t("h2",{attrs:{id:"render"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[A._v("#")]),A._v(" Render")]),A._v(" "),t("p",[A._v("I used "),t("a",{attrs:{href:"https://docs.rs/wgpu_glyph",target:"_blank",rel:"noopener noreferrer"}},[A._v("wgpu_glyph"),t("OutboundLink")],1),A._v(" for the text and white quads for the ball and paddles. There's not much to say here, it's Pong after all.")]),A._v(" "),t("p",[A._v("I did mess around with batching, however. It was totally overkill for this project, but it was a good learning experience. Here's the code if you're interested.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_ball")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ball")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_player")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Player")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("3")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("build")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wgpu"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Device")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("len")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("as")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("h2",{attrs:{id:"sound"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sound"}},[A._v("#")]),A._v(" Sound")]),A._v(" "),t("p",[A._v("I used "),t("a",{attrs:{href:"https://docs.rs/rodio",target:"_blank",rel:"noopener noreferrer"}},[A._v("rodio"),t("OutboundLink")],1),A._v(" for sound. I created a "),t("code",[A._v("SoundPack")]),A._v(" class to store the sounds. Deciding how to get the sounds to play took some thinking. I chose to pass in a "),t("code",[A._v("Vec")]),A._v(" into the "),t("code",[A._v("update_state")]),A._v(" method. The system would then push an event to the "),t("code",[A._v("Vec")]),A._v(". The "),t("code",[A._v("Event")]),A._v(" enum is listed below.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Copy, Clone)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Event")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ButtonPressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("FocusChanged")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("BallBounce")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cgmath"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vector2")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Score")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("I was going to have "),t("code",[A._v("BallBounce")]),A._v(" play a positioned sound using a "),t("code",[A._v("SpatialSink")]),A._v(", but I was getting clipping issues, and I wanted to be done with the project. Aside from that, the events system worked nicely.")]),A._v(" "),t("h2",{attrs:{id:"wasm-support"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wasm-support"}},[A._v("#")]),A._v(" WASM Support")]),A._v(" "),t("p",[A._v("This example works on the web, but there are a few steps that I needed to take to make things work. The first one was that I needed to switch to using a "),t("code",[A._v("lib.rs")]),A._v(" instead of just "),t("code",[A._v("main.rs")]),A._v(". I opted to use "),t("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[A._v("wasm-pack"),t("OutboundLink")],1),A._v(" to create the web assembly. I could have kept the old format by using wasm-bindgen directly, but I ran into issues with using the wrong version of wasm-bindgen, so I elected to stick with wasm-pack.")]),A._v(" "),t("p",[A._v("In order for wasm-pack to work properly I first needed to add some dependencies:")]),A._v(" "),t("div",{staticClass:"language-toml[dependencies] extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[A._v('cfg-if = "1"\nenv_logger = "0.10"\nwinit = "0.28"\nanyhow = "1.0"\nbytemuck = { version = "1.12", features = [ "derive" ] }\ncgmath = "0.18"\npollster = "0.3"\nwgpu = { version = "0.18", features = ["spirv"]}\nwgpu_glyph = "0.18"\nrand = "0.8"\nrodio = { version = "0.15", default-features = false, features = ["wav"] }\nlog = "0.4"\ninstant = "0.1"\n\n[target.\'cfg(target_arch = "wasm32")\'.dependencies]\nconsole_error_panic_hook = "0.1.6"\nconsole_log = "1.0"\ngetrandom = { version = "0.2", features = ["js"] }\nrodio = { version = "0.15", default-features = false, features = ["wasm-bindgen", "wav"] }\nwasm-bindgen-futures = "0.4.20"\nwasm-bindgen = "=0.2.87"\nweb-sys = { version = "0.3.53", features = [\n "Document",\n "Window",\n "Element",\n]}\nwgpu = { version = "0.18", features = ["spirv", "webgl"]}\n\n[build-dependencies]\nanyhow = "1.0"\nfs_extra = "1.2"\nglob = "0.3"\nrayon = "1.4"\nnaga = { version = "0.9", features = ["glsl-in", "spv-out", "wgsl-out"]}\n\n')])])]),t("p",[A._v("I'll highlight a few of these:")]),A._v(" "),t("ul",[t("li",[A._v("rand: If you want to use rand on the web, you need to include getrandom directly and enable its "),t("code",[A._v("js")]),A._v(" feature.")]),A._v(" "),t("li",[A._v("rodio: I had to disable all of the features for the WASM build, and then enabled them separately. The "),t("code",[A._v("mp3")]),A._v(" feature specifically wasn't working for me. There might have been a workaround, but since I'm not using mp3 in this example I just elected to only use wav.")]),A._v(" "),t("li",[A._v("instant: This crate is basically just a wrapper around "),t("code",[A._v("std::time::Instant")]),A._v(". In a normal build, it's just a type alias. In web builds it uses the browser's time functions.")]),A._v(" "),t("li",[A._v("cfg-if: This is a convenient crate for making platform-specific code less horrible to write.")]),A._v(" "),t("li",[A._v("env_logger and console_log: env_logger doesn't work on web assembly so we need to use a different logger. console_log is the one used in the web assembly tutorials, so I went with that one.")]),A._v(" "),t("li",[A._v("wasm-bindgen: This crate is the glue that makes Rust code work on the web. If you are building using the wasm-bindgen command you need to make sure that the command version of wasm-bindgen matches the version in Cargo.toml "),t("strong",[A._v("exactly")]),A._v(" otherwise you'll have problems. If you use wasm-pack it will download the appropriate wasm-bindgen binary to use for your crate.")]),A._v(" "),t("li",[A._v('web-sys: This has functions and types that allow you to use different methods available in js such as "getElementById()".')])]),A._v(" "),t("p",[A._v("Now that that's out of the way let's talk about some code. First, we need to create a function that will start our event loop.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch="),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wasm_bindgen"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("prelude"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg_attr(target_arch="),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(", wasm_bindgen(start))]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Snipped...")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The "),t("code",[A._v("wasm_bindgen(start)")]),A._v(" tell's wasm-bindgen that this function should be started as soon as the web assembly module is loaded by javascript. Most of the code inside this function is the same as what you'd find in other examples on this site, but there is some specific stuff we need to do on the web.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cfg_if"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token macro property"}},[A._v("cfg_if!")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_log"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("init_with_level")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("log"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Level")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Warn")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Could\'t initialize logger"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("std"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("panic"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_hook")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Box")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_error_panic_hook"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),A._v("hook"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("env_logger"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("init")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("This code should run before you try to do anything significant. It sets up the logger based on what architecture you're building for. Most architectures will use "),t("code",[A._v("env_logger")]),A._v(". The "),t("code",[A._v("wasm32")]),A._v(" architecture will use "),t("code",[A._v("console_log")]),A._v(". It's also important that we tell Rust to forward panics to javascript. If we didn't do this we would have no idea when our Rust code panics.")]),A._v(" "),t("p",[A._v("Next, we create a window. Much of it is like we've done before, but since we are supporting fullscreen we need to do some extra steps.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" event_loop "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("EventLoop")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" monitor "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" event_loop"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("primary_monitor")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" video_mode "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" monitor"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("video_modes")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("next")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" size "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" video_mode"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("clone")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("map_or")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("800")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("600")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" vm"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" window "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowBuilder")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_visible")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_title")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Pong"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("video_mode"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("map")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Exclusive")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("build")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("event_loop"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// WASM builds don't have access to monitor information, so")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// we should specify a fallback resolution")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("is_none")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_inner_size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("We then have to do some web-specific stuff if we are on that platform.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("platform"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("web"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowExtWebSys")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("window")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("win"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" win"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("document")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("doc"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" dst "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" doc"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("get_element_by_id")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm-example"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" canvas "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Element")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("from")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("canvas")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n dst"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("append_child")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("canvas"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("ok")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Request fullscreen, if denied, continue as normal")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" canvas"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("request_fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ok")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Err")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Some")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Couldn\'t append canvas to document body."')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("Everything else works the same.")]),A._v(" "),t("h2",{attrs:{id:"summary"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#summary"}},[A._v("#")]),A._v(" Summary")]),A._v(" "),t("p",[A._v("A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.")]),A._v(" "),t("p",[A._v("Try the code down below! (Controls currently require a keyboard.)")]),A._v(" "),t("WasmExample",{attrs:{example:"pong"}})],1)}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/52.48268452.js b/assets/js/52.09f16d08.js similarity index 99% rename from assets/js/52.48268452.js rename to assets/js/52.09f16d08.js index 681b4e7c..062a82a7 100644 --- a/assets/js/52.48268452.js +++ b/assets/js/52.09f16d08.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{389:function(t,s){t.exports="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="},461:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"wgpu-without-a-window"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wgpu-without-a-window"}},[t._v("#")]),t._v(" Wgpu without a window")]),t._v(" "),s("p",[t._v("Sometimes we just want to leverage the gpu. Maybe we want to crunch a large set of numbers in parallel. Maybe we're working on a 3D movie, and need to create a realistic-looking scene with path tracing. Maybe we're mining a cryptocurrency. In all these situations, we don't necessarily "),s("em",[t._v("need")]),t._v(" to see what's going on.")]),t._v(" "),s("h2",{attrs:{id:"so-what-do-we-need-to-do"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#so-what-do-we-need-to-do"}},[t._v("#")]),t._v(" So what do we need to do?")]),t._v(" "),s("p",[t._v("It's actually quite simple. We don't "),s("em",[t._v("need")]),t._v(" a window to create an "),s("code",[t._v("Instance")]),t._v(", we don't "),s("em",[t._v("need")]),t._v(" a window to select an "),s("code",[t._v("Adapter")]),t._v(", nor do we "),s("em",[t._v("need")]),t._v(" a window to create a "),s("code",[t._v("Device")]),t._v(". We only needed the window to create a "),s("code",[t._v("Surface")]),t._v(" which we needed to create the "),s("code",[t._v("SwapChain")]),t._v(". Once we have a "),s("code",[t._v("Device")]),t._v(", we have all we need to start sending commands to the gpu.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"a-triangle-without-a-window"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-triangle-without-a-window"}},[t._v("#")]),t._v(" A triangle without a window")]),t._v(" "),s("p",[t._v("Now we've talked about not needing to see what the gpu is doing, but we do need to see the results at some point. If we look back to talking about the "),s("RouterLink",{attrs:{to:"/beginner/tutorial2-surface/#render"}},[t._v("surface")]),t._v(" we see that we use "),s("code",[t._v("surface.get_current_texture()")]),t._v(" to grab a texture to draw to. We'll skip that step by creating the texture ourselves. One thing to note here is we need to specify "),s("code",[t._v("wgpu::TextureFormat::Rgba8UnormSrgb")]),t._v(" to "),s("code",[t._v("format")]),t._v(" instead of "),s("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" since PNG uses RGBA, not BGRA.")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're using "),s("code",[t._v("TextureUsages::RENDER_ATTACHMENT")]),t._v(" so wgpu can render to our texture. The "),s("code",[t._v("TextureUsages::COPY_SRC")]),t._v(" is so we can pull data out of the texture so we can save it to a file.")]),t._v(" "),s("p",[t._v("While we can use this texture to draw our triangle, we need some way to get at the pixels inside it. Back in the "),s("RouterLink",{attrs:{to:"/beginner/tutorial5-textures/"}},[t._v("texture tutorial")]),t._v(" we used a buffer to load color data from a file that we then copied into our buffer. Now we are going to do the reverse: copy data into a buffer from our texture to save into a file. We'll need a buffer big enough for our data.")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we need to store this for later")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" u32_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("u32_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" output_buffer_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this tells wpgu that we want to read this buffer from the cpu")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now that we have something to draw to, let's make something to draw. Since we're just drawing a triangle, let's grab the shader code from the "),s("RouterLink",{attrs:{to:"/beginner/tutorial3-pipeline/#writing-the-shaders"}},[t._v("pipeline tutorial")]),t._v(".")],1),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.vert")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token macro property"}},[s("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),s("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token expression"}},[s("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n gl_Position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("gl_VertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.frag")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token macro property"}},[s("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),s("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token expression"}},[s("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("location"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),t._v(" f_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n f_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Update dependencies to support SPIR-V module.")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("shaderc")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"spirv"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),s("p",[t._v("Using that we'll create a simple "),s("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" compiler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Compiler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_spirv "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n vs_src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_spirv "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n fs_src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fragment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vs_spirv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fs_spirv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_module "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vs_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_module "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Fragment Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fs_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vs_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("fs_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to need an encoder, so let's do that.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("RenderPass")]),t._v(" is where things get interesting. A render pass requires at least one color attachment. A color attachment requires a "),s("code",[t._v("TextureView")]),t._v(" to attach to. We used to use a texture from "),s("code",[t._v("SwapChain")]),t._v(" for this, but any "),s("code",[t._v("TextureView")]),t._v(" will do, including our "),s("code",[t._v("texture_view")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pass_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pass_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("There's not much we can do with the data when it's stuck in a "),s("code",[t._v("Texture")]),t._v(", so let's copy it into our "),s("code",[t._v("output_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" u32_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now that we've made all our commands, let's submit them to the gpu.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"getting-data-out-of-a-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-out-of-a-buffer"}},[t._v("#")]),t._v(" Getting data out of a buffer")]),t._v(" "),s("p",[t._v("In order to get the data out of the buffer, we need to first map it, then we can get a "),s("code",[t._v("BufferView")]),t._v(" that we can treat like a "),s("code",[t._v("&[u8]")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to scope the mapping variables so that we can")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unmap the buffer")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: We have to create the mapping THEN device.poll() before await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the future. Otherwise the application will freeze.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("futures_intrusive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("channel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("shared"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("oneshot_channel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("send")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("receive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("I used "),s("a",{attrs:{href:"https://docs.rs/futures-intrusive",target:"_blank",rel:"noopener noreferrer"}},[t._v("futures-intrusive"),s("OutboundLink")],1),t._v(" as that's the crate they use in the "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/tree/master/wgpu/examples/capture",target:"_blank",rel:"noopener noreferrer"}},[t._v("exampls on the wgpu repo"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"main-is-not-asyncable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#main-is-not-asyncable"}},[t._v("#")]),t._v(" Main is not asyncable")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("main()")]),t._v(" method can't return a future, so we can't use the "),s("code",[t._v("async")]),t._v(" keyword. We'll get around this by putting our code into a different function so that we can block it in "),s("code",[t._v("main()")]),t._v(". You'll need to use a crate that can poll futures such as the "),s("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster crate"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("There are crates such as "),s("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),s("OutboundLink")],1),t._v(", and "),s("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),s("OutboundLink")],1),t._v(" that you can use to annotate "),s("code",[t._v("main()")]),t._v(" so it can be async. I opted not to do that as both those crates are a little more hefty for this project. You're welcome to use whatever async setup you like 🙂")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Windowless drawing code...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With all that you should have an image like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(389),alt:"a brown triangle"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{389:function(t,s){t.exports="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="},463:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"wgpu-without-a-window"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wgpu-without-a-window"}},[t._v("#")]),t._v(" Wgpu without a window")]),t._v(" "),s("p",[t._v("Sometimes we just want to leverage the gpu. Maybe we want to crunch a large set of numbers in parallel. Maybe we're working on a 3D movie, and need to create a realistic-looking scene with path tracing. Maybe we're mining a cryptocurrency. In all these situations, we don't necessarily "),s("em",[t._v("need")]),t._v(" to see what's going on.")]),t._v(" "),s("h2",{attrs:{id:"so-what-do-we-need-to-do"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#so-what-do-we-need-to-do"}},[t._v("#")]),t._v(" So what do we need to do?")]),t._v(" "),s("p",[t._v("It's actually quite simple. We don't "),s("em",[t._v("need")]),t._v(" a window to create an "),s("code",[t._v("Instance")]),t._v(", we don't "),s("em",[t._v("need")]),t._v(" a window to select an "),s("code",[t._v("Adapter")]),t._v(", nor do we "),s("em",[t._v("need")]),t._v(" a window to create a "),s("code",[t._v("Device")]),t._v(". We only needed the window to create a "),s("code",[t._v("Surface")]),t._v(" which we needed to create the "),s("code",[t._v("SwapChain")]),t._v(". Once we have a "),s("code",[t._v("Device")]),t._v(", we have all we need to start sending commands to the gpu.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"a-triangle-without-a-window"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-triangle-without-a-window"}},[t._v("#")]),t._v(" A triangle without a window")]),t._v(" "),s("p",[t._v("Now we've talked about not needing to see what the gpu is doing, but we do need to see the results at some point. If we look back to talking about the "),s("RouterLink",{attrs:{to:"/beginner/tutorial2-surface/#render"}},[t._v("surface")]),t._v(" we see that we use "),s("code",[t._v("surface.get_current_texture()")]),t._v(" to grab a texture to draw to. We'll skip that step by creating the texture ourselves. One thing to note here is we need to specify "),s("code",[t._v("wgpu::TextureFormat::Rgba8UnormSrgb")]),t._v(" to "),s("code",[t._v("format")]),t._v(" instead of "),s("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" since PNG uses RGBA, not BGRA.")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're using "),s("code",[t._v("TextureUsages::RENDER_ATTACHMENT")]),t._v(" so wgpu can render to our texture. The "),s("code",[t._v("TextureUsages::COPY_SRC")]),t._v(" is so we can pull data out of the texture so we can save it to a file.")]),t._v(" "),s("p",[t._v("While we can use this texture to draw our triangle, we need some way to get at the pixels inside it. Back in the "),s("RouterLink",{attrs:{to:"/beginner/tutorial5-textures/"}},[t._v("texture tutorial")]),t._v(" we used a buffer to load color data from a file that we then copied into our buffer. Now we are going to do the reverse: copy data into a buffer from our texture to save into a file. We'll need a buffer big enough for our data.")],1),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we need to store this for later")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" u32_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("u32_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" output_buffer_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this tells wpgu that we want to read this buffer from the cpu")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now that we have something to draw to, let's make something to draw. Since we're just drawing a triangle, let's grab the shader code from the "),s("RouterLink",{attrs:{to:"/beginner/tutorial3-pipeline/#writing-the-shaders"}},[t._v("pipeline tutorial")]),t._v(".")],1),t._v(" "),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.vert")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token macro property"}},[s("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),s("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token expression"}},[s("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n gl_Position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("gl_VertexIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-glsl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-glsl"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.frag")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token macro property"}},[s("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),s("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token expression"}},[s("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("location"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),t._v(" f_color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n f_color "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Update dependencies to support SPIR-V module.")]),t._v(" "),s("div",{staticClass:"language-toml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-toml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("shaderc")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"spirv"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),s("p",[t._v("Using that we'll create a simple "),s("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" compiler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Compiler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_spirv "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n vs_src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_spirv "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n fs_src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fragment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vs_spirv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fs_spirv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_module "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vs_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_module "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Fragment Shader"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fs_data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vs_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("fs_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_blend"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("We're going to need an encoder, so let's do that.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("RenderPass")]),t._v(" is where things get interesting. A render pass requires at least one color attachment. A color attachment requires a "),s("code",[t._v("TextureView")]),t._v(" to attach to. We used to use a texture from "),s("code",[t._v("SwapChain")]),t._v(" for this, but any "),s("code",[t._v("TextureView")]),t._v(" will do, including our "),s("code",[t._v("texture_view")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pass_desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StoreOp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Store")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pass_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("There's not much we can do with the data when it's stuck in a "),s("code",[t._v("Texture")]),t._v(", so let's copy it into our "),s("code",[t._v("output_buffer")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" u32_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Now that we've made all our commands, let's submit them to the gpu.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[t._v("queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"getting-data-out-of-a-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-out-of-a-buffer"}},[t._v("#")]),t._v(" Getting data out of a buffer")]),t._v(" "),s("p",[t._v("In order to get the data out of the buffer, we need to first map it, then we can get a "),s("code",[t._v("BufferView")]),t._v(" that we can treat like a "),s("code",[t._v("&[u8]")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to scope the mapping variables so that we can")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unmap the buffer")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: We have to create the mapping THEN device.poll() before await")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the future. Otherwise the application will freeze.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("futures_intrusive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("channel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("shared"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("oneshot_channel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("send")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("receive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[t._v("I used "),s("a",{attrs:{href:"https://docs.rs/futures-intrusive",target:"_blank",rel:"noopener noreferrer"}},[t._v("futures-intrusive"),s("OutboundLink")],1),t._v(" as that's the crate they use in the "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/tree/master/wgpu/examples/capture",target:"_blank",rel:"noopener noreferrer"}},[t._v("exampls on the wgpu repo"),s("OutboundLink")],1),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"main-is-not-asyncable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#main-is-not-asyncable"}},[t._v("#")]),t._v(" Main is not asyncable")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("main()")]),t._v(" method can't return a future, so we can't use the "),s("code",[t._v("async")]),t._v(" keyword. We'll get around this by putting our code into a different function so that we can block it in "),s("code",[t._v("main()")]),t._v(". You'll need to use a crate that can poll futures such as the "),s("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster crate"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("There are crates such as "),s("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),s("OutboundLink")],1),t._v(", and "),s("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),s("OutboundLink")],1),t._v(" that you can use to annotate "),s("code",[t._v("main()")]),t._v(" so it can be async. I opted not to do that as both those crates are a little more hefty for this project. You're welcome to use whatever async setup you like 🙂")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Windowless drawing code...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("With all that you should have an image like this.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(389),alt:"a brown triangle"}})]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/57.22981293.js b/assets/js/57.9cdfcb79.js similarity index 98% rename from assets/js/57.22981293.js rename to assets/js/57.9cdfcb79.js index 7af5e7fe..5940e297 100644 --- a/assets/js/57.22981293.js +++ b/assets/js/57.9cdfcb79.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{446:function(t,a,s){"use strict";s.r(a);var e=s(7),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"update-to-0-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-12"}},[t._v("#")]),t._v(" Update to 0.12!")]),t._v(" "),a("p",[t._v("There are not a ton of changes in this release, so the migration\nwasn't too painful.")]),t._v(" "),a("h2",{attrs:{id:"multi-view-added"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multi-view-added"}},[t._v("#")]),t._v(" Multi view added")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("RenderPipelineDescriptor")]),t._v(" now includes a "),a("code",[t._v("multiview")]),t._v(" field that\nindicates the number of array textures if array textures are used\nas render attachments.")]),t._v(" "),a("h2",{attrs:{id:"no-more-block-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#no-more-block-attribute"}},[t._v("#")]),t._v(" No more block attribute")]),t._v(" "),a("p",[t._v("The WGSL spec has changed and the "),a("code",[t._v("block")]),t._v(" attribute is no longer a thing.\nThis means that structs in WGSL no longer need to be annotated to be used\nas uniform input. For example:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_pos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Can be simplified to just")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_pos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"more-validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-validation"}},[t._v("#")]),t._v(" More validation")]),t._v(" "),a("p",[t._v("Wgpu now has a validation error where if your uniform doesn't match the\nalignment specified in the shader, the program will crash when you go to\ndraw:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("thread 'main' panicked at 'wgpu error: Validation Error\n\nCaused by:\n In a RenderPass\n note: encoder = `Render Encoder`\n In a draw command, indexed:true indirect:false\n note: render pipeline = `Render Pipeline`\n Buffer is bound with size 28 where the shader expects 32 in group[1] compact index 0\n")])])]),a("p",[t._v("The only struct that I needed to change was the "),a("code",[t._v("LightUniform")]),t._v(" struct. All\nI needed to do was add a padding field:")]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("LightUniform")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Due to uniforms requiring 16 byte (4 float) spacing, we need to use a padding field here")]),t._v("\n _padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Due to uniforms requiring 16 byte (4 float) spacing, we need to use a padding field here")]),t._v("\n _padding2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("I updated the "),a("a",{attrs:{href:"../../intermediate/tutorial10-lighting"}},[t._v("lighting tutorial")]),t._v(" to reflect this change.")]),t._v(" "),a("h2",{attrs:{id:"misc"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#misc"}},[t._v("#")]),t._v(" Misc")]),t._v(" "),a("p",[t._v("Due to the recent deploy to "),a("a",{attrs:{href:"https://docs.rs/anyhow/latest/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),a("OutboundLink")],1),t._v(" that\nbreaks glob imports (aka. "),a("code",[t._v("use anyhow::*")]),t._v("), I had to switch qualified\nimports and uses (ie. "),a("code",[t._v("anyhow::Result")]),t._v("). This was mostly an issue on my\nbuild scripts for some of the showcase examples.")]),t._v(" "),a("p",[t._v("The main tutorial examples weren't affected, and the changes are minor, so\nif you're curious feel free to look at the repo.")])])}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{447:function(t,a,s){"use strict";s.r(a);var e=s(7),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"update-to-0-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-12"}},[t._v("#")]),t._v(" Update to 0.12!")]),t._v(" "),a("p",[t._v("There are not a ton of changes in this release, so the migration\nwasn't too painful.")]),t._v(" "),a("h2",{attrs:{id:"multi-view-added"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multi-view-added"}},[t._v("#")]),t._v(" Multi view added")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("RenderPipelineDescriptor")]),t._v(" now includes a "),a("code",[t._v("multiview")]),t._v(" field that\nindicates the number of array textures if array textures are used\nas render attachments.")]),t._v(" "),a("h2",{attrs:{id:"no-more-block-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#no-more-block-attribute"}},[t._v("#")]),t._v(" No more block attribute")]),t._v(" "),a("p",[t._v("The WGSL spec has changed and the "),a("code",[t._v("block")]),t._v(" attribute is no longer a thing.\nThis means that structs in WGSL no longer need to be annotated to be used\nas uniform input. For example:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_pos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Can be simplified to just")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-wgsl"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_pos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("mat4x4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"more-validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-validation"}},[t._v("#")]),t._v(" More validation")]),t._v(" "),a("p",[t._v("Wgpu now has a validation error where if your uniform doesn't match the\nalignment specified in the shader, the program will crash when you go to\ndraw:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("thread 'main' panicked at 'wgpu error: Validation Error\n\nCaused by:\n In a RenderPass\n note: encoder = `Render Encoder`\n In a draw command, indexed:true indirect:false\n note: render pipeline = `Render Pipeline`\n Buffer is bound with size 28 where the shader expects 32 in group[1] compact index 0\n")])])]),a("p",[t._v("The only struct that I needed to change was the "),a("code",[t._v("LightUniform")]),t._v(" struct. All\nI needed to do was add a padding field:")]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("LightUniform")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Due to uniforms requiring 16 byte (4 float) spacing, we need to use a padding field here")]),t._v("\n _padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Due to uniforms requiring 16 byte (4 float) spacing, we need to use a padding field here")]),t._v("\n _padding2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("I updated the "),a("a",{attrs:{href:"../../intermediate/tutorial10-lighting"}},[t._v("lighting tutorial")]),t._v(" to reflect this change.")]),t._v(" "),a("h2",{attrs:{id:"misc"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#misc"}},[t._v("#")]),t._v(" Misc")]),t._v(" "),a("p",[t._v("Due to the recent deploy to "),a("a",{attrs:{href:"https://docs.rs/anyhow/latest/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),a("OutboundLink")],1),t._v(" that\nbreaks glob imports (aka. "),a("code",[t._v("use anyhow::*")]),t._v("), I had to switch qualified\nimports and uses (ie. "),a("code",[t._v("anyhow::Result")]),t._v("). This was mostly an issue on my\nbuild scripts for some of the showcase examples.")]),t._v(" "),a("p",[t._v("The main tutorial examples weren't affected, and the changes are minor, so\nif you're curious feel free to look at the repo.")])])}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/59.5dd82339.js b/assets/js/59.302e302d.js similarity index 98% rename from assets/js/59.5dd82339.js rename to assets/js/59.302e302d.js index 4f896562..01aa682d 100644 --- a/assets/js/59.5dd82339.js +++ b/assets/js/59.302e302d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{449:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"update-to-0-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-14"}},[t._v("#")]),t._v(" Update to 0.14!")]),t._v(" "),a("p",[t._v("Not much has change as api wise at least as far as this tutorial is concerned. Here are the changes I had to make:")]),t._v(" "),a("h2",{attrs:{id:"surfaceconfiguration-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#surfaceconfiguration-changes"}},[t._v("#")]),t._v(" SurfaceConfiguration changes")]),t._v(" "),a("p",[a("code",[t._v("SurfaceConfiguration")]),t._v(" now expects an "),a("code",[t._v("alpha_mode")]),t._v(" parameter. I believe this is to support transparent windows, but I haven't read into it. The code changes are minimal:")]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompositeAlphaMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Auto")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"winit-updated"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#winit-updated"}},[t._v("#")]),t._v(" Winit updated")]),t._v(" "),a("p",[t._v('Winit has been updated to version "0.27" so if you build on linux you may need to update some of your packages:')]),t._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("sudo")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("apt")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" libfontconfig libfontconfig1-dev\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{450:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"update-to-0-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-14"}},[t._v("#")]),t._v(" Update to 0.14!")]),t._v(" "),a("p",[t._v("Not much has change as api wise at least as far as this tutorial is concerned. Here are the changes I had to make:")]),t._v(" "),a("h2",{attrs:{id:"surfaceconfiguration-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#surfaceconfiguration-changes"}},[t._v("#")]),t._v(" SurfaceConfiguration changes")]),t._v(" "),a("p",[a("code",[t._v("SurfaceConfiguration")]),t._v(" now expects an "),a("code",[t._v("alpha_mode")]),t._v(" parameter. I believe this is to support transparent windows, but I haven't read into it. The code changes are minimal:")]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompositeAlphaMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Auto")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"winit-updated"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#winit-updated"}},[t._v("#")]),t._v(" Winit updated")]),t._v(" "),a("p",[t._v('Winit has been updated to version "0.27" so if you build on linux you may need to update some of your packages:')]),t._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("sudo")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("apt")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" libfontconfig libfontconfig1-dev\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/60.1ced8124.js b/assets/js/60.bca5b731.js similarity index 99% rename from assets/js/60.1ced8124.js rename to assets/js/60.bca5b731.js index 4c8b12d2..b2e0483d 100644 --- a/assets/js/60.1ced8124.js +++ b/assets/js/60.bca5b731.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{450:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"update-to-0-15"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-15"}},[t._v("#")]),t._v(" Update to 0.15!")]),t._v(" "),s("p",[t._v("This is a pretty minor update for this tutorial, but there are a few things to consider.")]),t._v(" "),s("ol",[s("li",[t._v("A "),s("code",[t._v("view_formats")]),t._v(" field was added to "),s("code",[t._v("TextureDescriptor")]),t._v(" and "),s("code",[t._v("SurfaceDescriptor")]),t._v(". This allows you to specify different "),s("code",[t._v("TextureFormat")]),t._v("s that can be used when creating "),s("code",[t._v("TextureView")]),t._v("s. At time of writing this pretty much only allows you to switch between using SRGB and linear formats. For example:")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other fields...")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8Unorm")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The format used to create the "),s("code",[t._v("Texture")]),t._v(" will always be supported, so you don't have to specify it.")]),t._v(" "),s("ol",{attrs:{start:"2"}},[s("li",[t._v("The method of acquiring texture formats supported by the "),s("code",[t._v("Surface")]),t._v(" has changed. Previously there was a "),s("code",[t._v("get_supported_formats()")]),t._v(" that would return a "),s("code",[t._v("Vec")]),t._v(". Now "),s("code",[t._v("Surface")]),t._v(" has a "),s("code",[t._v("get_capabilities()")]),t._v(" method. This will return a "),s("code",[t._v("SurfaceCapabilities")]),t._v(" object that will have the supported formats as well as some other fields that you can checkout "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SurfaceCapabilities.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(". I'm using it in the tutorial like this:")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_caps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_capabilities")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Shader code in this tutorial assumes an Srgb surface texture. Using a different")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// one will result all the colors comming out darker. If you want to support non")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Srgb surfaces, you'll need to account for that when drawing to the frame.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_format "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copied")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_srgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("present_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("alpha_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("As always let me know if I missed anything. You can check out the full changelog for 0.15 "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/blob/master/CHANGELOG.md#wgpu-0150-2023-01-25",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{449:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"update-to-0-15"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-15"}},[t._v("#")]),t._v(" Update to 0.15!")]),t._v(" "),s("p",[t._v("This is a pretty minor update for this tutorial, but there are a few things to consider.")]),t._v(" "),s("ol",[s("li",[t._v("A "),s("code",[t._v("view_formats")]),t._v(" field was added to "),s("code",[t._v("TextureDescriptor")]),t._v(" and "),s("code",[t._v("SurfaceDescriptor")]),t._v(". This allows you to specify different "),s("code",[t._v("TextureFormat")]),t._v("s that can be used when creating "),s("code",[t._v("TextureView")]),t._v("s. At time of writing this pretty much only allows you to switch between using SRGB and linear formats. For example:")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other fields...")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8Unorm")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The format used to create the "),s("code",[t._v("Texture")]),t._v(" will always be supported, so you don't have to specify it.")]),t._v(" "),s("ol",{attrs:{start:"2"}},[s("li",[t._v("The method of acquiring texture formats supported by the "),s("code",[t._v("Surface")]),t._v(" has changed. Previously there was a "),s("code",[t._v("get_supported_formats()")]),t._v(" that would return a "),s("code",[t._v("Vec")]),t._v(". Now "),s("code",[t._v("Surface")]),t._v(" has a "),s("code",[t._v("get_capabilities()")]),t._v(" method. This will return a "),s("code",[t._v("SurfaceCapabilities")]),t._v(" object that will have the supported formats as well as some other fields that you can checkout "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SurfaceCapabilities.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(". I'm using it in the tutorial like this:")])]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_caps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_capabilities")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Shader code in this tutorial assumes an Srgb surface texture. Using a different")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// one will result all the colors comming out darker. If you want to support non")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Srgb surfaces, you'll need to account for that when drawing to the frame.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface_format "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("copied")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_srgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("present_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface_caps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("alpha_modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_formats"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("As always let me know if I missed anything. You can check out the full changelog for 0.15 "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/blob/master/CHANGELOG.md#wgpu-0150-2023-01-25",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/64.b9a310af.js b/assets/js/64.5fd53e01.js similarity index 87% rename from assets/js/64.b9a310af.js rename to assets/js/64.5fd53e01.js index 079eb20c..16e02a5e 100644 --- a/assets/js/64.b9a310af.js +++ b/assets/js/64.5fd53e01.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{454:function(e,t,o){"use strict";o.r(t);var s=o(7),r=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"foreword"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#foreword"}},[e._v("#")]),e._v(" Foreword")]),e._v(" "),t("p",[e._v("The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with "),t("code",[e._v("wgpu")]),e._v(". I won't go over the specifics of creating "),t("code",[e._v("wgpu")]),e._v(" resources, as those will be covered elsewhere. The code for these examples is still available however and will be accessible on Github.")])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{455:function(e,t,o){"use strict";o.r(t);var s=o(7),r=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"foreword"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#foreword"}},[e._v("#")]),e._v(" Foreword")]),e._v(" "),t("p",[e._v("The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with "),t("code",[e._v("wgpu")]),e._v(". I won't go over the specifics of creating "),t("code",[e._v("wgpu")]),e._v(" resources, as those will be covered elsewhere. The code for these examples is still available however and will be accessible on Github.")])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/66.ef1e3716.js b/assets/js/66.19a033d1.js similarity index 99% rename from assets/js/66.ef1e3716.js rename to assets/js/66.19a033d1.js index c7c8ef9b..7fe8ad73 100644 --- a/assets/js/66.ef1e3716.js +++ b/assets/js/66.19a033d1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{462:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"multi-threading-with-wgpu-and-rayon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#multi-threading-with-wgpu-and-rayon"}},[t._v("#")]),t._v(" Multi-threading with Wgpu and Rayon")]),t._v(" "),s("div",{staticClass:"warn"},[s("p",[t._v("This example has not been tested on WASM. Rayon has support for multi threading on WASM via "),s("a",{attrs:{href:"https://docs.rs/crate/wasm-bindgen-rayon/latest",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-rayon"),s("OutboundLink")],1),t._v(", though that implementation is only currently working on Chrome-based browsers. Because of this I've elected not to make a WASM version of this tutorial at this time.")])]),t._v(" "),s("p",[t._v("The main selling point of Vulkan, DirectX 12, Metal, and by extension Wgpu is that these APIs is that they designed from the ground up to be thread safe. Up to this point, we have been doing everything on a single thread. That's about to change.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("This example is based on the code for "),s("a",{attrs:{href:"../intermediate/tutorial12-camera"}},[t._v("tutorial12-camera")])])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("I won't go into what threads are in this tutorial. That is a full CS course in and of itself. All we'll be covering is using threading to make loading resources faster.")]),t._v(" "),s("p",[t._v("We won't go over multithreading rendering as we don't have enough different types of objects to justify that yet. This will change in a coming tutorial")])]),t._v(" "),s("h2",{attrs:{id:"parallelizing-loading-models-and-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parallelizing-loading-models-and-textures"}},[t._v("#")]),t._v(" Parallelizing loading models and textures")]),t._v(" "),s("p",[t._v("Currently, we load the materials and meshes of our model one at a time. This is a perfect opportunity for multithreading! All our changes will be in "),s("code",[t._v("model.rs")]),t._v(". Let's first start with the materials. We'll convert the regular for loop into a "),s("code",[t._v("par_iter().map()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resources.rs")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(not(target_arch="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v("))]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("rayon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IntoParallelIterator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can also parallelize loading the textures!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" textures "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("containing_folder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("containing_folder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Pop removes from the end of the list.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Next, we can update the meshes to be loaded in parallel.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but "),s("code",[t._v("rayon")]),t._v(" should prevent us from using too many threads.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("You'll notice that we didn't use "),s("code",[t._v("rayon")]),t._v(" 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 "),s("code",[t._v("vertices")]),t._v(". I don't feel like introducing a "),s("code",[t._v("std::sync::Mutex")]),t._v(", so I'll leave it for now.")]),t._v(" "),s("p",[t._v("This is honestly a better job for a compute shader, as the model data is going to get loaded into a buffer anyway.")])]),t._v(" "),s("h2",{attrs:{id:"it-s-that-easy"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#it-s-that-easy"}},[t._v("#")]),t._v(" It's that easy!")]),t._v(" "),s("p",[t._v("Most of the "),s("code",[t._v("wgpu")]),t._v(" types are "),s("code",[t._v("Send + Sync")]),t._v(", 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.")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("Elapsed (Original): 309.596382ms\nElapsed (Threaded): 199.645027ms\n")])])]),s("p",[t._v("We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.")]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{460:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"multi-threading-with-wgpu-and-rayon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#multi-threading-with-wgpu-and-rayon"}},[t._v("#")]),t._v(" Multi-threading with Wgpu and Rayon")]),t._v(" "),s("div",{staticClass:"warn"},[s("p",[t._v("This example has not been tested on WASM. Rayon has support for multi threading on WASM via "),s("a",{attrs:{href:"https://docs.rs/crate/wasm-bindgen-rayon/latest",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-rayon"),s("OutboundLink")],1),t._v(", though that implementation is only currently working on Chrome-based browsers. Because of this I've elected not to make a WASM version of this tutorial at this time.")])]),t._v(" "),s("p",[t._v("The main selling point of Vulkan, DirectX 12, Metal, and by extension Wgpu is that these APIs is that they designed from the ground up to be thread safe. Up to this point, we have been doing everything on a single thread. That's about to change.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("This example is based on the code for "),s("a",{attrs:{href:"../intermediate/tutorial12-camera"}},[t._v("tutorial12-camera")])])]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("I won't go into what threads are in this tutorial. That is a full CS course in and of itself. All we'll be covering is using threading to make loading resources faster.")]),t._v(" "),s("p",[t._v("We won't go over multithreading rendering as we don't have enough different types of objects to justify that yet. This will change in a coming tutorial")])]),t._v(" "),s("h2",{attrs:{id:"parallelizing-loading-models-and-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parallelizing-loading-models-and-textures"}},[t._v("#")]),t._v(" Parallelizing loading models and textures")]),t._v(" "),s("p",[t._v("Currently, we load the materials and meshes of our model one at a time. This is a perfect opportunity for multithreading! All our changes will be in "),s("code",[t._v("model.rs")]),t._v(". Let's first start with the materials. We'll convert the regular for loop into a "),s("code",[t._v("par_iter().map()")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resources.rs")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(not(target_arch="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v("))]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("rayon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IntoParallelIterator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" materials "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_materials"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can also parallelize loading the textures!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" textures "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("containing_folder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("containing_folder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("is_normal_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Pop removes from the end of the list.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Next, we can update the meshes to be loaded in parallel.")]),t._v(" "),s("div",{staticClass:"language-rust extra-class"},[s("pre",{pre:!0,attrs:{class:"language-rust"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_par_iter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token closure-params"}},[s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n contents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but "),s("code",[t._v("rayon")]),t._v(" should prevent us from using too many threads.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("You'll notice that we didn't use "),s("code",[t._v("rayon")]),t._v(" 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 "),s("code",[t._v("vertices")]),t._v(". I don't feel like introducing a "),s("code",[t._v("std::sync::Mutex")]),t._v(", so I'll leave it for now.")]),t._v(" "),s("p",[t._v("This is honestly a better job for a compute shader, as the model data is going to get loaded into a buffer anyway.")])]),t._v(" "),s("h2",{attrs:{id:"it-s-that-easy"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#it-s-that-easy"}},[t._v("#")]),t._v(" It's that easy!")]),t._v(" "),s("p",[t._v("Most of the "),s("code",[t._v("wgpu")]),t._v(" types are "),s("code",[t._v("Send + Sync")]),t._v(", 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.")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("Elapsed (Original): 309.596382ms\nElapsed (Threaded): 199.645027ms\n")])])]),s("p",[t._v("We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.")]),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/67.ab338058.js b/assets/js/67.cf780dc9.js similarity index 76% rename from assets/js/67.ab338058.js rename to assets/js/67.cf780dc9.js index cf91e85d..e51cedea 100644 --- a/assets/js/67.ab338058.js +++ b/assets/js/67.cf780dc9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{463:function(t,s,n){"use strict";n.r(s);var o=n(7),e=Object(o.a)({},(function(){var t=this._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"coming-soon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#coming-soon"}},[this._v("#")]),this._v(" Coming Soon!")]),this._v(" "),t("p",[this._v("This section has not yet been completed.")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{462:function(t,s,n){"use strict";n.r(s);var o=n(7),e=Object(o.a)({},(function(){var t=this._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"coming-soon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#coming-soon"}},[this._v("#")]),this._v(" Coming Soon!")]),this._v(" "),t("p",[this._v("This section has not yet been completed.")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/8.72c848a8.js b/assets/js/8.72c848a8.js deleted file mode 100644 index e8cb8d14..00000000 --- a/assets/js/8.72c848a8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{249:function(module,__webpack_exports__,__webpack_require__){"use strict";(function(module){__webpack_require__.d(__webpack_exports__,"bf",(function(){return __wbg_set_wasm})),__webpack_require__.d(__webpack_exports__,"eh",(function(){return start})),__webpack_require__.d(__webpack_exports__,"Ig",(function(){return __wbindgen_cb_drop})),__webpack_require__.d(__webpack_exports__,"ah",(function(){return __wbindgen_object_drop_ref})),__webpack_require__.d(__webpack_exports__,"Zg",(function(){return __wbindgen_object_clone_ref})),__webpack_require__.d(__webpack_exports__,"ch",(function(){return __wbindgen_string_new})),__webpack_require__.d(__webpack_exports__,"ge",(function(){return __wbg_new_abda76e883ba8a5f})),__webpack_require__.d(__webpack_exports__,"nf",(function(){return __wbg_stack_658279fe44541cf6})),__webpack_require__.d(__webpack_exports__,"Pc",(function(){return __wbg_error_f851667af71bcfc6})),__webpack_require__.d(__webpack_exports__,"Hg",(function(){return __wbindgen_boolean_get})),__webpack_require__.d(__webpack_exports__,"bh",(function(){return __wbindgen_string_get})),__webpack_require__.d(__webpack_exports__,"Xg",(function(){return __wbindgen_number_get})),__webpack_require__.d(__webpack_exports__,"Yg",(function(){return __wbindgen_number_new})),__webpack_require__.d(__webpack_exports__,"Nd",(function(){return __wbg_instanceof_WebGl2RenderingContext_f921526c513bf717})),__webpack_require__.d(__webpack_exports__,"k",(function(){return __wbg_beginQuery_d338463adf721553})),__webpack_require__.d(__webpack_exports__,"l",(function(){return __wbg_bindBufferRange_d8a5ebc8ea8be507})),__webpack_require__.d(__webpack_exports__,"s",(function(){return __wbg_bindSampler_d74e398b68cf5980})),__webpack_require__.d(__webpack_exports__,"w",(function(){return __wbg_bindVertexArray_8863a216d7b0a339})),__webpack_require__.d(__webpack_exports__,"H",(function(){return __wbg_blitFramebuffer_e6642748dd06d47e})),__webpack_require__.d(__webpack_exports__,"J",(function(){return __wbg_bufferData_496bbb31639d9850})),__webpack_require__.d(__webpack_exports__,"I",(function(){return __wbg_bufferData_21334671c4ba6004})),__webpack_require__.d(__webpack_exports__,"M",(function(){return __wbg_bufferSubData_c472b93c9e272eac})),__webpack_require__.d(__webpack_exports__,"V",(function(){return __wbg_clearBufferfi_25bcd35b825f629d})),__webpack_require__.d(__webpack_exports__,"W",(function(){return __wbg_clearBufferfv_9de0cb45cc5a012b})),__webpack_require__.d(__webpack_exports__,"X",(function(){return __wbg_clearBufferiv_fc2f8bce2930c586})),__webpack_require__.d(__webpack_exports__,"Y",(function(){return __wbg_clearBufferuiv_2f6d220a31eabca4})),__webpack_require__.d(__webpack_exports__,"ab",(function(){return __wbg_clientWaitSync_6a74725ec890efdd})),__webpack_require__.d(__webpack_exports__,"kb",(function(){return __wbg_compressedTexSubImage2D_945ba54869f3a612})),__webpack_require__.d(__webpack_exports__,"lb",(function(){return __wbg_compressedTexSubImage2D_ed56fa2f82a839b1})),__webpack_require__.d(__webpack_exports__,"nb",(function(){return __wbg_compressedTexSubImage3D_4cebeae1440fdc14})),__webpack_require__.d(__webpack_exports__,"mb",(function(){return __wbg_compressedTexSubImage3D_0ae61aaa91089745})),__webpack_require__.d(__webpack_exports__,"pb",(function(){return __wbg_copyBufferSubData_d112912c90270156})),__webpack_require__.d(__webpack_exports__,"sb",(function(){return __wbg_copyTexSubImage3D_9fa5e9e7b16cf09d})),__webpack_require__.d(__webpack_exports__,"Db",(function(){return __wbg_createQuery_2ef2dc0f01a4a8e3})),__webpack_require__.d(__webpack_exports__,"Gb",(function(){return __wbg_createSampler_039ecd204675292b})),__webpack_require__.d(__webpack_exports__,"Mb",(function(){return __wbg_createVertexArray_51d51e1e1e13e9f6})),__webpack_require__.d(__webpack_exports__,"Zb",(function(){return __wbg_deleteQuery_0c64c5200cdc57a6})),__webpack_require__.d(__webpack_exports__,"cc",(function(){return __wbg_deleteSampler_ce5b8e120f96fc1a})),__webpack_require__.d(__webpack_exports__,"fc",(function(){return __wbg_deleteSync_1b05dfcc176e7466})),__webpack_require__.d(__webpack_exports__,"jc",(function(){return __wbg_deleteVertexArray_3e4f2e2ff7f05a19})),__webpack_require__.d(__webpack_exports__,"Bc",(function(){return __wbg_drawArraysInstanced_8fb13fe9faf95212})),__webpack_require__.d(__webpack_exports__,"Fc",(function(){return __wbg_drawBuffers_15d26e17a8d24ee0})),__webpack_require__.d(__webpack_exports__,"Hc",(function(){return __wbg_drawElementsInstanced_dcf53461a977d44c})),__webpack_require__.d(__webpack_exports__,"Mc",(function(){return __wbg_endQuery_faf7eb231d6f2a66})),__webpack_require__.d(__webpack_exports__,"Rc",(function(){return __wbg_fenceSync_d68dcbdcdd134d92})),__webpack_require__.d(__webpack_exports__,"Wc",(function(){return __wbg_framebufferTextureLayer_a92788e5f0409234})),__webpack_require__.d(__webpack_exports__,"ed",(function(){return __wbg_getBufferSubData_8710cc73621fc332})),__webpack_require__.d(__webpack_exports__,"id",(function(){return __wbg_getIndexedParameter_4f004dc25c3d15a9})),__webpack_require__.d(__webpack_exports__,"wd",(function(){return __wbg_getSyncParameter_d93ec7f6bb11274c})),__webpack_require__.d(__webpack_exports__,"xd",(function(){return __wbg_getUniformBlockIndex_99c15053c9a87c73})),__webpack_require__.d(__webpack_exports__,"Pd",(function(){return __wbg_invalidateFramebuffer_03bd99588b15d627})),__webpack_require__.d(__webpack_exports__,"Fe",(function(){return __wbg_readBuffer_c426fe18344296ff})),__webpack_require__.d(__webpack_exports__,"Ie",(function(){return __wbg_readPixels_99fda83f6ca7ec72})),__webpack_require__.d(__webpack_exports__,"He",(function(){return __wbg_readPixels_9634f0dcfb54667c})),__webpack_require__.d(__webpack_exports__,"Le",(function(){return __wbg_renderbufferStorageMultisample_9260e2e620c949e5})),__webpack_require__.d(__webpack_exports__,"Re",(function(){return __wbg_samplerParameterf_1c7562ef061b803b})),__webpack_require__.d(__webpack_exports__,"Se",(function(){return __wbg_samplerParameteri_0fee083bc48e70ee})),__webpack_require__.d(__webpack_exports__,"Cf",(function(){return __wbg_texStorage2D_6665d01025a7e7fc})),__webpack_require__.d(__webpack_exports__,"Df",(function(){return __wbg_texStorage3D_c01c31c1b02d75fd})),__webpack_require__.d(__webpack_exports__,"If",(function(){return __wbg_texSubImage2D_d2841ded12a8aa66})),__webpack_require__.d(__webpack_exports__,"Hf",(function(){return __wbg_texSubImage2D_bccf4e250f1ce1b8})),__webpack_require__.d(__webpack_exports__,"Ef",(function(){return __wbg_texSubImage2D_780a7c889dc20a98})),__webpack_require__.d(__webpack_exports__,"Gf",(function(){return __wbg_texSubImage2D_b5bb36f2f54b4264})),__webpack_require__.d(__webpack_exports__,"Ff",(function(){return __wbg_texSubImage2D_a297114050ea1098})),__webpack_require__.d(__webpack_exports__,"Kf",(function(){return __wbg_texSubImage3D_43f39a73ed02fae3})),__webpack_require__.d(__webpack_exports__,"Of",(function(){return __wbg_texSubImage3D_ffdccca1422b482a})),__webpack_require__.d(__webpack_exports__,"Lf",(function(){return __wbg_texSubImage3D_69d5e09d45e0251c})),__webpack_require__.d(__webpack_exports__,"Nf",(function(){return __wbg_texSubImage3D_ae3ed5d0154c346c})),__webpack_require__.d(__webpack_exports__,"Mf",(function(){return __wbg_texSubImage3D_80693fc2c7855e4d})),__webpack_require__.d(__webpack_exports__,"Uf",(function(){return __wbg_uniform2fv_2b473f6dce24c898})),__webpack_require__.d(__webpack_exports__,"Xf",(function(){return __wbg_uniform2iv_fdaa3cd258d3451e})),__webpack_require__.d(__webpack_exports__,"Zf",(function(){return __wbg_uniform3fv_3e55033ca16ec6ab})),__webpack_require__.d(__webpack_exports__,"bg",(function(){return __wbg_uniform3iv_3d3ed90c76e6777e})),__webpack_require__.d(__webpack_exports__,"eg",(function(){return __wbg_uniform4fv_26ec0c9d7bf6d7c6})),__webpack_require__.d(__webpack_exports__,"hg",(function(){return __wbg_uniform4iv_2be6b77c47b90d81})),__webpack_require__.d(__webpack_exports__,"ig",(function(){return __wbg_uniformBlockBinding_0dc4bd81bb4ccb6a})),__webpack_require__.d(__webpack_exports__,"jg",(function(){return __wbg_uniformMatrix2fv_1ab7aeb8562ea3dd})),__webpack_require__.d(__webpack_exports__,"lg",(function(){return __wbg_uniformMatrix3fv_0b151be4d76ee66b})),__webpack_require__.d(__webpack_exports__,"og",(function(){return __wbg_uniformMatrix4fv_766b5ba343983038})),__webpack_require__.d(__webpack_exports__,"sg",(function(){return __wbg_vertexAttribDivisor_197e2e23e3fbde7f})),__webpack_require__.d(__webpack_exports__,"tg",(function(){return __wbg_vertexAttribIPointer_6f8540e358f8a547})),__webpack_require__.d(__webpack_exports__,"a",(function(){return __wbg_activeTexture_799bf1387e911c27})),__webpack_require__.d(__webpack_exports__,"i",(function(){return __wbg_attachShader_47256b6b3d42a22e})),__webpack_require__.d(__webpack_exports__,"m",(function(){return __wbg_bindBuffer_24f6010e273fa400})),__webpack_require__.d(__webpack_exports__,"p",(function(){return __wbg_bindFramebuffer_a9573e340dab20fe})),__webpack_require__.d(__webpack_exports__,"q",(function(){return __wbg_bindRenderbuffer_54c404711f9b6958})),__webpack_require__.d(__webpack_exports__,"t",(function(){return __wbg_bindTexture_92d6d7f8bff9531e})),__webpack_require__.d(__webpack_exports__,"x",(function(){return __wbg_blendColor_7974f09cb60d2be0})),__webpack_require__.d(__webpack_exports__,"B",(function(){return __wbg_blendEquation_12146cb96dc1bcd9})),__webpack_require__.d(__webpack_exports__,"z",(function(){return __wbg_blendEquationSeparate_205526dad772d160})),__webpack_require__.d(__webpack_exports__,"F",(function(){return __wbg_blendFunc_533de6de45b80a09})),__webpack_require__.d(__webpack_exports__,"E",(function(){return __wbg_blendFuncSeparate_fbf93dee3e5ce456})),__webpack_require__.d(__webpack_exports__,"gb",(function(){return __wbg_colorMask_fba1e2efd891e2ac})),__webpack_require__.d(__webpack_exports__,"hb",(function(){return __wbg_compileShader_6bf78b425d5c98e1})),__webpack_require__.d(__webpack_exports__,"qb",(function(){return __wbg_copyTexSubImage2D_26685100d5f2b4c0})),__webpack_require__.d(__webpack_exports__,"wb",(function(){return __wbg_createBuffer_323425af422748ac})),__webpack_require__.d(__webpack_exports__,"zb",(function(){return __wbg_createFramebuffer_1684a99697ac9563})),__webpack_require__.d(__webpack_exports__,"Bb",(function(){return __wbg_createProgram_4eaf3b97b5747a62})),__webpack_require__.d(__webpack_exports__,"Eb",(function(){return __wbg_createRenderbuffer_3e6dd356d7897ed7})),__webpack_require__.d(__webpack_exports__,"Hb",(function(){return __wbg_createShader_429776c9dd6fb87b})),__webpack_require__.d(__webpack_exports__,"Jb",(function(){return __wbg_createTexture_1bf4d6fec570124b})),__webpack_require__.d(__webpack_exports__,"Qb",(function(){return __wbg_cullFace_6daa9f2aa42b4620})),__webpack_require__.d(__webpack_exports__,"Tb",(function(){return __wbg_deleteBuffer_2c09d03fa4b0bd08})),__webpack_require__.d(__webpack_exports__,"Vb",(function(){return __wbg_deleteFramebuffer_edd16bb8df6a8e0d})),__webpack_require__.d(__webpack_exports__,"Xb",(function(){return __wbg_deleteProgram_53a32852f245b839})),__webpack_require__.d(__webpack_exports__,"ac",(function(){return __wbg_deleteRenderbuffer_134040051fcc1ba5})),__webpack_require__.d(__webpack_exports__,"dc",(function(){return __wbg_deleteShader_7c1222349324b5e2})),__webpack_require__.d(__webpack_exports__,"gc",(function(){return __wbg_deleteTexture_4fcfea73cd8f6214})),__webpack_require__.d(__webpack_exports__,"oc",(function(){return __wbg_depthFunc_fb41ad353d07948d})),__webpack_require__.d(__webpack_exports__,"pc",(function(){return __wbg_depthMask_6a4ff02cd2a2702e})),__webpack_require__.d(__webpack_exports__,"rc",(function(){return __wbg_depthRange_a5647a9040aec55b})),__webpack_require__.d(__webpack_exports__,"yc",(function(){return __wbg_disable_e02106ca6c7002d6})),__webpack_require__.d(__webpack_exports__,"vc",(function(){return __wbg_disableVertexAttribArray_6d57776c8f642f44})),__webpack_require__.d(__webpack_exports__,"Cc",(function(){return __wbg_drawArrays_c91ce3f736bf1f2a})),__webpack_require__.d(__webpack_exports__,"Kc",(function(){return __wbg_enable_195891416c520019})),__webpack_require__.d(__webpack_exports__,"Jc",(function(){return __wbg_enableVertexAttribArray_8804480c2ea0bb72})),__webpack_require__.d(__webpack_exports__,"Sc",(function(){return __wbg_framebufferRenderbuffer_3ec0983918c2b69d})),__webpack_require__.d(__webpack_exports__,"Vc",(function(){return __wbg_framebufferTexture2D_e88fcbd7f8523bb8})),__webpack_require__.d(__webpack_exports__,"Zc",(function(){return __wbg_frontFace_786a036f1d643925})),__webpack_require__.d(__webpack_exports__,"bd",(function(){return __wbg_getActiveUniform_78367ddc7339640b})),__webpack_require__.d(__webpack_exports__,"hd",(function(){return __wbg_getExtension_77909f6d51d49d4d})),__webpack_require__.d(__webpack_exports__,"kd",(function(){return __wbg_getParameter_55b36a787dbbfb74})),__webpack_require__.d(__webpack_exports__,"nd",(function(){return __wbg_getProgramInfoLog_b81bc53188e286fa})),__webpack_require__.d(__webpack_exports__,"pd",(function(){return __wbg_getProgramParameter_35522a0bfdfaad27})),__webpack_require__.d(__webpack_exports__,"qd",(function(){return __wbg_getShaderInfoLog_968b93e75477d725})),__webpack_require__.d(__webpack_exports__,"sd",(function(){return __wbg_getShaderParameter_ac2727ae4fe7648e})),__webpack_require__.d(__webpack_exports__,"ud",(function(){return __wbg_getSupportedExtensions_fafc31aab913037d})),__webpack_require__.d(__webpack_exports__,"zd",(function(){return __wbg_getUniformLocation_9f6eb60c560a347b})),__webpack_require__.d(__webpack_exports__,"Ud",(function(){return __wbg_linkProgram_33998194075d71fb})),__webpack_require__.d(__webpack_exports__,"we",(function(){return __wbg_pixelStorei_f3a24990aa352fc7})),__webpack_require__.d(__webpack_exports__,"Ae",(function(){return __wbg_polygonOffset_faca8e73770272ff})),__webpack_require__.d(__webpack_exports__,"Ne",(function(){return __wbg_renderbufferStorage_987d1af7c9faf5dd})),__webpack_require__.d(__webpack_exports__,"Ue",(function(){return __wbg_scissor_e8e41e1c0a9817c8})),__webpack_require__.d(__webpack_exports__,"if",(function(){return __wbg_shaderSource_1cb7c64dc7d1a500})),__webpack_require__.d(__webpack_exports__,"qf",(function(){return __wbg_stencilFuncSeparate_8ff94e24a50a3c45})),__webpack_require__.d(__webpack_exports__,"tf",(function(){return __wbg_stencilMask_641f92999dd3c3de})),__webpack_require__.d(__webpack_exports__,"sf",(function(){return __wbg_stencilMaskSeparate_6b2c8ef22fb3b6d1})),__webpack_require__.d(__webpack_exports__,"wf",(function(){return __wbg_stencilOpSeparate_38925591af8feb44})),__webpack_require__.d(__webpack_exports__,"Bf",(function(){return __wbg_texParameteri_85dad939f62a15aa})),__webpack_require__.d(__webpack_exports__,"Rf",(function(){return __wbg_uniform1f_88379f4e2630bc66})),__webpack_require__.d(__webpack_exports__,"Tf",(function(){return __wbg_uniform1i_d2e61a6a43889648})),__webpack_require__.d(__webpack_exports__,"dg",(function(){return __wbg_uniform4f_a9fd337d4b07f595})),__webpack_require__.d(__webpack_exports__,"qg",(function(){return __wbg_useProgram_3683cf6f60939dcd})),__webpack_require__.d(__webpack_exports__,"ug",(function(){return __wbg_vertexAttribPointer_316ffe2f0458fde7})),__webpack_require__.d(__webpack_exports__,"zg",(function(){return __wbg_viewport_fad1ce9e18f741c0})),__webpack_require__.d(__webpack_exports__,"Od",(function(){return __wbg_instanceof_Window_9029196b662bc42a})),__webpack_require__.d(__webpack_exports__,"zc",(function(){return __wbg_document_f7ace2b956f30a4f})),__webpack_require__.d(__webpack_exports__,"Ld",(function(){return __wbg_innerWidth_ebe07ce5463ff293})),__webpack_require__.d(__webpack_exports__,"Kd",(function(){return __wbg_innerHeight_2dd06d8cf68f1d7d})),__webpack_require__.d(__webpack_exports__,"uc",(function(){return __wbg_devicePixelRatio_f9de7bddca0eaf20})),__webpack_require__.d(__webpack_exports__,"Xd",(function(){return __wbg_matchMedia_12ef69056e32d0b3})),__webpack_require__.d(__webpack_exports__,"Cd",(function(){return __wbg_get_cb7c1c2da725c920})),__webpack_require__.d(__webpack_exports__,"S",(function(){return __wbg_cancelAnimationFrame_9b68e9588c6543bc})),__webpack_require__.d(__webpack_exports__,"Oe",(function(){return __wbg_requestAnimationFrame_d082200514b6674d})),__webpack_require__.d(__webpack_exports__,"Z",(function(){return __wbg_clearTimeout_220be2fa0577b342})),__webpack_require__.d(__webpack_exports__,"Ze",(function(){return __wbg_setTimeout_eb1a0d116c26d9f6})),__webpack_require__.d(__webpack_exports__,"ad",(function(){return __wbg_fullscreenElement_07d5b77ef6c958c1})),__webpack_require__.d(__webpack_exports__,"yb",(function(){return __wbg_createElement_4891554b28d3388b})),__webpack_require__.d(__webpack_exports__,"gd",(function(){return __wbg_getElementById_cc0e0d931b0d9a28})),__webpack_require__.d(__webpack_exports__,"Ee",(function(){return __wbg_querySelector_52ded52c20e23921})),__webpack_require__.d(__webpack_exports__,"dd",(function(){return __wbg_getBoundingClientRect_ac9db8cf97ca8083})),__webpack_require__.d(__webpack_exports__,"Pe",(function(){return __wbg_requestFullscreen_3545278bcd44910c})),__webpack_require__.d(__webpack_exports__,"We",(function(){return __wbg_setAttribute_e7e80b478b7b8b2f})),__webpack_require__.d(__webpack_exports__,"Xe",(function(){return __wbg_setPointerCapture_e7c29336490bba19})),__webpack_require__.d(__webpack_exports__,"yf",(function(){return __wbg_style_3801009b2339aa94})),__webpack_require__.d(__webpack_exports__,"K",(function(){return __wbg_bufferData_92a3e0b745b0d726})),__webpack_require__.d(__webpack_exports__,"L",(function(){return __wbg_bufferData_a11a9f65f31e7256})),__webpack_require__.d(__webpack_exports__,"N",(function(){return __wbg_bufferSubData_fca6f1c10273be21})),__webpack_require__.d(__webpack_exports__,"jb",(function(){return __wbg_compressedTexSubImage2D_21078c6de0a71aad})),__webpack_require__.d(__webpack_exports__,"Ge",(function(){return __wbg_readPixels_91b0d8854de90477})),__webpack_require__.d(__webpack_exports__,"Jf",(function(){return __wbg_texSubImage2D_f1a31f8045b7f831})),__webpack_require__.d(__webpack_exports__,"Vf",(function(){return __wbg_uniform2fv_c928f6ba0085b381})),__webpack_require__.d(__webpack_exports__,"Wf",(function(){return __wbg_uniform2iv_7e5f8e7c2f4d4d6a})),__webpack_require__.d(__webpack_exports__,"Yf",(function(){return __wbg_uniform3fv_1aba437b913c1926})),__webpack_require__.d(__webpack_exports__,"ag",(function(){return __wbg_uniform3iv_23751fe4dfcdf539})),__webpack_require__.d(__webpack_exports__,"fg",(function(){return __wbg_uniform4fv_7c51c2251d851cb2})),__webpack_require__.d(__webpack_exports__,"gg",(function(){return __wbg_uniform4iv_27b49984e9c5d90a})),__webpack_require__.d(__webpack_exports__,"kg",(function(){return __wbg_uniformMatrix2fv_f8f3ef807f196bf1})),__webpack_require__.d(__webpack_exports__,"mg",(function(){return __wbg_uniformMatrix3fv_341eec37953e50c5})),__webpack_require__.d(__webpack_exports__,"ng",(function(){return __wbg_uniformMatrix4fv_465ab8de531f4f78})),__webpack_require__.d(__webpack_exports__,"b",(function(){return __wbg_activeTexture_93b4de60af07da9c})),__webpack_require__.d(__webpack_exports__,"j",(function(){return __wbg_attachShader_b65b695055670cb5})),__webpack_require__.d(__webpack_exports__,"n",(function(){return __wbg_bindBuffer_313561e5bc0e533f})),__webpack_require__.d(__webpack_exports__,"o",(function(){return __wbg_bindFramebuffer_56bf6536a4ced0ec})),__webpack_require__.d(__webpack_exports__,"r",(function(){return __wbg_bindRenderbuffer_559c7c6b6676dddd})),__webpack_require__.d(__webpack_exports__,"u",(function(){return __wbg_bindTexture_9cb5c770d1ba2cca})),__webpack_require__.d(__webpack_exports__,"y",(function(){return __wbg_blendColor_b9006ef6c450acd0})),__webpack_require__.d(__webpack_exports__,"C",(function(){return __wbg_blendEquation_f31ce08020786a09})),__webpack_require__.d(__webpack_exports__,"A",(function(){return __wbg_blendEquationSeparate_7ec5e34f066e44f8})),__webpack_require__.d(__webpack_exports__,"G",(function(){return __wbg_blendFunc_fbe9d3a688fe71c3})),__webpack_require__.d(__webpack_exports__,"D",(function(){return __wbg_blendFuncSeparate_7547ade0a7dfade2})),__webpack_require__.d(__webpack_exports__,"fb",(function(){return __wbg_colorMask_7cbd7a102954ede9})),__webpack_require__.d(__webpack_exports__,"ib",(function(){return __wbg_compileShader_d88d0a8cd9b72b4d})),__webpack_require__.d(__webpack_exports__,"rb",(function(){return __wbg_copyTexSubImage2D_3029f8dfe7543ab6})),__webpack_require__.d(__webpack_exports__,"xb",(function(){return __wbg_createBuffer_59051f4461e7c5e2})),__webpack_require__.d(__webpack_exports__,"Ab",(function(){return __wbg_createFramebuffer_223c1212ad76affc})),__webpack_require__.d(__webpack_exports__,"Cb",(function(){return __wbg_createProgram_88dbe21c0b682e1a})),__webpack_require__.d(__webpack_exports__,"Fb",(function(){return __wbg_createRenderbuffer_bcb61b756ba21490})),__webpack_require__.d(__webpack_exports__,"Ib",(function(){return __wbg_createShader_9d7d388633caad18})),__webpack_require__.d(__webpack_exports__,"Kb",(function(){return __wbg_createTexture_9d0bb4d741b8ad76})),__webpack_require__.d(__webpack_exports__,"Pb",(function(){return __wbg_cullFace_4c086dc1d86a19b5})),__webpack_require__.d(__webpack_exports__,"Ub",(function(){return __wbg_deleteBuffer_cdc6b9c73f54aff7})),__webpack_require__.d(__webpack_exports__,"Wb",(function(){return __wbg_deleteFramebuffer_fcc10cb143c6573d})),__webpack_require__.d(__webpack_exports__,"Yb",(function(){return __wbg_deleteProgram_d8d7fc79ba83b256})),__webpack_require__.d(__webpack_exports__,"bc",(function(){return __wbg_deleteRenderbuffer_edf9e1b4e0a1e005})),__webpack_require__.d(__webpack_exports__,"ec",(function(){return __wbg_deleteShader_9a2f85efe5cb3706})),__webpack_require__.d(__webpack_exports__,"hc",(function(){return __wbg_deleteTexture_a883356c5034d482})),__webpack_require__.d(__webpack_exports__,"nc",(function(){return __wbg_depthFunc_4eda7b4e682acbad})),__webpack_require__.d(__webpack_exports__,"qc",(function(){return __wbg_depthMask_a3071e13bb087102})),__webpack_require__.d(__webpack_exports__,"sc",(function(){return __wbg_depthRange_ff5298a73fd02650})),__webpack_require__.d(__webpack_exports__,"xc",(function(){return __wbg_disable_5cf2070641fa2ed7})),__webpack_require__.d(__webpack_exports__,"wc",(function(){return __wbg_disableVertexAttribArray_8dacd44e21adcaa2})),__webpack_require__.d(__webpack_exports__,"Dc",(function(){return __wbg_drawArrays_d5c7dc2b2376c85a})),__webpack_require__.d(__webpack_exports__,"Lc",(function(){return __wbg_enable_8965e69c596f0a94})),__webpack_require__.d(__webpack_exports__,"Ic",(function(){return __wbg_enableVertexAttribArray_2b0475db43533cf2})),__webpack_require__.d(__webpack_exports__,"Tc",(function(){return __wbg_framebufferRenderbuffer_d80f5381d429bc45})),__webpack_require__.d(__webpack_exports__,"Uc",(function(){return __wbg_framebufferTexture2D_953e69a8bec22fa9})),__webpack_require__.d(__webpack_exports__,"Yc",(function(){return __wbg_frontFace_0ba67b9e6365557c})),__webpack_require__.d(__webpack_exports__,"cd",(function(){return __wbg_getActiveUniform_87df972e841afed2})),__webpack_require__.d(__webpack_exports__,"ld",(function(){return __wbg_getParameter_bfab7f0b00c9d7fb})),__webpack_require__.d(__webpack_exports__,"md",(function(){return __wbg_getProgramInfoLog_0b7af4ad85fa52a4})),__webpack_require__.d(__webpack_exports__,"od",(function(){return __wbg_getProgramParameter_2a3735278367f8bc})),__webpack_require__.d(__webpack_exports__,"rd",(function(){return __wbg_getShaderInfoLog_979aafa403ffb252})),__webpack_require__.d(__webpack_exports__,"td",(function(){return __wbg_getShaderParameter_e8054f1d9026fb70})),__webpack_require__.d(__webpack_exports__,"yd",(function(){return __wbg_getUniformLocation_688976233799a45a})),__webpack_require__.d(__webpack_exports__,"Vd",(function(){return __wbg_linkProgram_9a2d12d120d99917})),__webpack_require__.d(__webpack_exports__,"ve",(function(){return __wbg_pixelStorei_5ec932ebefd00149})),__webpack_require__.d(__webpack_exports__,"ze",(function(){return __wbg_polygonOffset_55eea57bba1b49e9})),__webpack_require__.d(__webpack_exports__,"Me",(function(){return __wbg_renderbufferStorage_4bcd9ddf1749ce26})),__webpack_require__.d(__webpack_exports__,"Te",(function(){return __wbg_scissor_c8ec3b1e053f3756})),__webpack_require__.d(__webpack_exports__,"jf",(function(){return __wbg_shaderSource_f435f9b74440bb54})),__webpack_require__.d(__webpack_exports__,"pf",(function(){return __wbg_stencilFuncSeparate_0fae0ee7c04a23b2})),__webpack_require__.d(__webpack_exports__,"uf",(function(){return __wbg_stencilMask_79416c29ac1ce3a4})),__webpack_require__.d(__webpack_exports__,"rf",(function(){return __wbg_stencilMaskSeparate_19bdb57664d2c34f})),__webpack_require__.d(__webpack_exports__,"vf",(function(){return __wbg_stencilOpSeparate_18e0bd316555925f})),__webpack_require__.d(__webpack_exports__,"Af",(function(){return __wbg_texParameteri_1f17358e51eb8069})),__webpack_require__.d(__webpack_exports__,"Qf",(function(){return __wbg_uniform1f_7586c5e17ad254c9})),__webpack_require__.d(__webpack_exports__,"Sf",(function(){return __wbg_uniform1i_9f94ef0ba6b3cc66})),__webpack_require__.d(__webpack_exports__,"cg",(function(){return __wbg_uniform4f_9aa5afa9177c6ab1})),__webpack_require__.d(__webpack_exports__,"pg",(function(){return __wbg_useProgram_019eb6df066fabf5})),__webpack_require__.d(__webpack_exports__,"vg",(function(){return __wbg_vertexAttribPointer_ca11984ee8843c0a})),__webpack_require__.d(__webpack_exports__,"yg",(function(){return __wbg_viewport_6ebef187c89e2616})),__webpack_require__.d(__webpack_exports__,"Ye",(function(){return __wbg_setProperty_b95ef63ab852879e})),__webpack_require__.d(__webpack_exports__,"c",(function(){return __wbg_addEventListener_5651108fc3ffeb6e})),__webpack_require__.d(__webpack_exports__,"d",(function(){return __wbg_addEventListener_a5963e26cd7b176b})),__webpack_require__.d(__webpack_exports__,"Je",(function(){return __wbg_removeEventListener_1fa0d9594cdb0b1d})),__webpack_require__.d(__webpack_exports__,"h",(function(){return __wbg_appendChild_51339d4cde00ee22})),__webpack_require__.d(__webpack_exports__,"cf",(function(){return __wbg_setbuffer_beeece042e02534f})),__webpack_require__.d(__webpack_exports__,"ff",(function(){return __wbg_setonended_83dd83b7f84cdef2})),__webpack_require__.d(__webpack_exports__,"of",(function(){return __wbg_start_99ecc2647eb67ca6})),__webpack_require__.d(__webpack_exports__,"Yd",(function(){return __wbg_matches_07c564b5b4101cf2})),__webpack_require__.d(__webpack_exports__,"e",(function(){return __wbg_addListener_85fb6e4bd17e8878})),__webpack_require__.d(__webpack_exports__,"Ke",(function(){return __wbg_removeListener_3b62020874cfc3c7})),__webpack_require__.d(__webpack_exports__,"re",(function(){return __wbg_now_0cfdc90c97d0c24b})),__webpack_require__.d(__webpack_exports__,"lc",(function(){return __wbg_deltaX_84508d00a1050e70})),__webpack_require__.d(__webpack_exports__,"mc",(function(){return __wbg_deltaY_64823169afb0335d})),__webpack_require__.d(__webpack_exports__,"kc",(function(){return __wbg_deltaMode_1c680147cfdba8a5})),__webpack_require__.d(__webpack_exports__,"Bg",(function(){return __wbg_width_019b79813c2e80cf})),__webpack_require__.d(__webpack_exports__,"Gd",(function(){return __wbg_height_12082005add04bb5})),__webpack_require__.d(__webpack_exports__,"vd",(function(){return __wbg_getSupportedProfiles_420ce044cc3114a1})),__webpack_require__.d(__webpack_exports__,"tc",(function(){return __wbg_destination_9e793cf556243084})),__webpack_require__.d(__webpack_exports__,"Rb",(function(){return __wbg_currentTime_c6831b97750b898c})),__webpack_require__.d(__webpack_exports__,"qe",(function(){return __wbg_newwithcontextoptions_3fb88aa326cd01e0})),__webpack_require__.d(__webpack_exports__,"db",(function(){return __wbg_close_51aa5539747ce076})),__webpack_require__.d(__webpack_exports__,"vb",(function(){return __wbg_createBuffer_13cd030d2b48e8fa})),__webpack_require__.d(__webpack_exports__,"ub",(function(){return __wbg_createBufferSource_58423f6345b5f559})),__webpack_require__.d(__webpack_exports__,"Qe",(function(){return __wbg_resume_9dc64ed7c3a65255})),__webpack_require__.d(__webpack_exports__,"Sb",(function(){return __wbg_debug_9a6b3243fbbebb61})),__webpack_require__.d(__webpack_exports__,"Nc",(function(){return __wbg_error_788ae33f81d3b84b})),__webpack_require__.d(__webpack_exports__,"Oc",(function(){return __wbg_error_c9309504864e78b5})),__webpack_require__.d(__webpack_exports__,"Jd",(function(){return __wbg_info_2e30e8204b29d91d})),__webpack_require__.d(__webpack_exports__,"Wd",(function(){return __wbg_log_1d3ae0273d8f4f8a})),__webpack_require__.d(__webpack_exports__,"Ag",(function(){return __wbg_warn_d60e832f9882c1b2})),__webpack_require__.d(__webpack_exports__,"U",(function(){return __wbg_charCode_75cea1a3a6d66388})),__webpack_require__.d(__webpack_exports__,"Rd",(function(){return __wbg_keyCode_dfa86be31f5ef90c})),__webpack_require__.d(__webpack_exports__,"f",(function(){return __wbg_altKey_612289acf855835c})),__webpack_require__.d(__webpack_exports__,"Ob",(function(){return __wbg_ctrlKey_582686fb2263dd3c})),__webpack_require__.d(__webpack_exports__,"kf",(function(){return __wbg_shiftKey_48e8701355d8e2d4})),__webpack_require__.d(__webpack_exports__,"ae",(function(){return __wbg_metaKey_43193b7cc99f8914})),__webpack_require__.d(__webpack_exports__,"Sd",(function(){return __wbg_key_8aeaa079126a9cc7})),__webpack_require__.d(__webpack_exports__,"eb",(function(){return __wbg_code_96d6322b968b2d17})),__webpack_require__.d(__webpack_exports__,"jd",(function(){return __wbg_getModifierState_5102ee8843516d2f})),__webpack_require__.d(__webpack_exports__,"Zd",(function(){return __wbg_matches_0f7e350783b542c2})),__webpack_require__.d(__webpack_exports__,"xe",(function(){return __wbg_pointerId_701aab7b4fb073ff})),__webpack_require__.d(__webpack_exports__,"Be",(function(){return __wbg_pressure_e388b6fd623a3917})),__webpack_require__.d(__webpack_exports__,"ye",(function(){return __wbg_pointerType_0009b1e4e6b0f428})),__webpack_require__.d(__webpack_exports__,"tb",(function(){return __wbg_copyToChannel_6e4bd2545a53db54})),__webpack_require__.d(__webpack_exports__,"Cg",(function(){return __wbg_width_0b4991f5cf7c640a})),__webpack_require__.d(__webpack_exports__,"gf",(function(){return __wbg_setwidth_15266a5e81f43cf0})),__webpack_require__.d(__webpack_exports__,"Hd",(function(){return __wbg_height_8cce73e95fb10fd3})),__webpack_require__.d(__webpack_exports__,"df",(function(){return __wbg_setheight_2e9bab573f1775a6})),__webpack_require__.d(__webpack_exports__,"ob",(function(){return __wbg_connect_3f8f5ba805800c62})),__webpack_require__.d(__webpack_exports__,"zf",(function(){return __wbg_target_f171e89c61e2bccf})),__webpack_require__.d(__webpack_exports__,"T",(function(){return __wbg_cancelBubble_90d1c3aa2a76cbeb})),__webpack_require__.d(__webpack_exports__,"Ce",(function(){return __wbg_preventDefault_24104f3f0a54546a})),__webpack_require__.d(__webpack_exports__,"xf",(function(){return __wbg_stopPropagation_55539cfa2506c867})),__webpack_require__.d(__webpack_exports__,"bb",(function(){return __wbg_clientX_1a480606ab0cabaa})),__webpack_require__.d(__webpack_exports__,"cb",(function(){return __wbg_clientY_9c7878f7faf3900f})),__webpack_require__.d(__webpack_exports__,"te",(function(){return __wbg_offsetX_5a58f16f6c3a41b6})),__webpack_require__.d(__webpack_exports__,"ue",(function(){return __wbg_offsetY_c45b4956f6429a95})),__webpack_require__.d(__webpack_exports__,"Nb",(function(){return __wbg_ctrlKey_0a805df688b5bf42})),__webpack_require__.d(__webpack_exports__,"lf",(function(){return __wbg_shiftKey_8a070ab6169b5fa4})),__webpack_require__.d(__webpack_exports__,"g",(function(){return __wbg_altKey_6fc1761a6b7a406e})),__webpack_require__.d(__webpack_exports__,"be",(function(){return __wbg_metaKey_d89287be4389a3c1})),__webpack_require__.d(__webpack_exports__,"P",(function(){return __wbg_button_7a095234b69de930})),__webpack_require__.d(__webpack_exports__,"Q",(function(){return __wbg_buttons_d0f40e1650e3fa28})),__webpack_require__.d(__webpack_exports__,"ce",(function(){return __wbg_movementX_966ec323c169d1a6})),__webpack_require__.d(__webpack_exports__,"de",(function(){return __wbg_movementY_b14b3bc8e1b31f23})),__webpack_require__.d(__webpack_exports__,"v",(function(){return __wbg_bindVertexArrayOES_b7d9da7e073aa6b5})),__webpack_require__.d(__webpack_exports__,"Lb",(function(){return __wbg_createVertexArrayOES_6a3c3a5a68201f8f})),__webpack_require__.d(__webpack_exports__,"ic",(function(){return __wbg_deleteVertexArrayOES_7bf4589e63d84df6})),__webpack_require__.d(__webpack_exports__,"mf",(function(){return __wbg_size_6eb4aa794f6bf220})),__webpack_require__.d(__webpack_exports__,"Pf",(function(){return __wbg_type_37bb6b4936b5e027})),__webpack_require__.d(__webpack_exports__,"ee",(function(){return __wbg_name_ebae3a7e89367611})),__webpack_require__.d(__webpack_exports__,"Ec",(function(){return __wbg_drawBuffersWEBGL_139bf2fe0c1522d6})),__webpack_require__.d(__webpack_exports__,"Md",(function(){return __wbg_instanceof_HtmlCanvasElement_da5f9efa0688cf6d})),__webpack_require__.d(__webpack_exports__,"Dg",(function(){return __wbg_width_2931aaedd21f1fff})),__webpack_require__.d(__webpack_exports__,"hf",(function(){return __wbg_setwidth_a667a942dba6656e})),__webpack_require__.d(__webpack_exports__,"Fd",(function(){return __wbg_height_0d36fbbeb60b0661})),__webpack_require__.d(__webpack_exports__,"ef",(function(){return __wbg_setheight_a747d440760fe5aa})),__webpack_require__.d(__webpack_exports__,"fd",(function(){return __wbg_getContext_6d1f155bb5c1096a})),__webpack_require__.d(__webpack_exports__,"xg",(function(){return __wbg_videoWidth_02eadb74917aa4fc})),__webpack_require__.d(__webpack_exports__,"wg",(function(){return __wbg_videoHeight_dac4c345988e5562})),__webpack_require__.d(__webpack_exports__,"Ac",(function(){return __wbg_drawArraysInstancedANGLE_01b862ba133350a3})),__webpack_require__.d(__webpack_exports__,"Gc",(function(){return __wbg_drawElementsInstancedANGLE_ea6343af8bf9c9f8})),__webpack_require__.d(__webpack_exports__,"rg",(function(){return __wbg_vertexAttribDivisorANGLE_a8476eb778e16c70})),__webpack_require__.d(__webpack_exports__,"Fg",(function(){return __wbg_x_6c8af74c3b4d8c09})),__webpack_require__.d(__webpack_exports__,"Gg",(function(){return __wbg_y_4cca2672ce1b5fc1})),__webpack_require__.d(__webpack_exports__,"Xc",(function(){return __wbg_framebufferTextureMultiviewOVR_4d911c3fccedc517})),__webpack_require__.d(__webpack_exports__,"Ad",(function(){return __wbg_get_44be0491f933a435})),__webpack_require__.d(__webpack_exports__,"Td",(function(){return __wbg_length_fff51ee6522a1a18})),__webpack_require__.d(__webpack_exports__,"fe",(function(){return __wbg_new_898a68150f225f2e})),__webpack_require__.d(__webpack_exports__,"ie",(function(){return __wbg_newnoargs_581967eacc0e2604})),__webpack_require__.d(__webpack_exports__,"Bd",(function(){return __wbg_get_97b561fb56f034b5})),__webpack_require__.d(__webpack_exports__,"R",(function(){return __wbg_call_cb65541d95d71282})),__webpack_require__.d(__webpack_exports__,"he",(function(){return __wbg_new_b51585de1b234aff})),__webpack_require__.d(__webpack_exports__,"Ve",(function(){return __wbg_self_1ff1d729e9aae938})),__webpack_require__.d(__webpack_exports__,"Eg",(function(){return __wbg_window_5f4faef6c12b79ec})),__webpack_require__.d(__webpack_exports__,"Dd",(function(){return __wbg_globalThis_1d39714405582d3c})),__webpack_require__.d(__webpack_exports__,"Ed",(function(){return __wbg_global_651f05c6a0944d1c})),__webpack_require__.d(__webpack_exports__,"Vg",(function(){return __wbindgen_is_undefined})),__webpack_require__.d(__webpack_exports__,"Qc",(function(){return __wbg_eval_8c72ad5eafe427f2})),__webpack_require__.d(__webpack_exports__,"Id",(function(){return __wbg_includes_e846113095d52470})),__webpack_require__.d(__webpack_exports__,"se",(function(){return __wbg_of_053899a68de3ef48})),__webpack_require__.d(__webpack_exports__,"De",(function(){return __wbg_push_ca1c26067ef907ac})),__webpack_require__.d(__webpack_exports__,"Qd",(function(){return __wbg_is_205d914af04a8faa})),__webpack_require__.d(__webpack_exports__,"O",(function(){return __wbg_buffer_085ec1f694018c4f})),__webpack_require__.d(__webpack_exports__,"oe",(function(){return __wbg_newwithbyteoffsetandlength_828b952f0e692245})),__webpack_require__.d(__webpack_exports__,"ne",(function(){return __wbg_newwithbyteoffsetandlength_735ed5ea2ae07fe9})),__webpack_require__.d(__webpack_exports__,"pe",(function(){return __wbg_newwithbyteoffsetandlength_9f43b22ab631d1d6})),__webpack_require__.d(__webpack_exports__,"le",(function(){return __wbg_newwithbyteoffsetandlength_6da8e527659b86aa})),__webpack_require__.d(__webpack_exports__,"je",(function(){return __wbg_newwithbyteoffsetandlength_31ff1024ef0c63c7})),__webpack_require__.d(__webpack_exports__,"me",(function(){return __wbg_newwithbyteoffsetandlength_6df0e8c3efd2a5d3})),__webpack_require__.d(__webpack_exports__,"ke",(function(){return __wbg_newwithbyteoffsetandlength_69193e31c844b792})),__webpack_require__.d(__webpack_exports__,"af",(function(){return __wbg_set_092e06b0f9d71865})),__webpack_require__.d(__webpack_exports__,"Ug",(function(){return __wbindgen_debug_string})),__webpack_require__.d(__webpack_exports__,"dh",(function(){return __wbindgen_throw})),__webpack_require__.d(__webpack_exports__,"Wg",(function(){return __wbindgen_memory})),__webpack_require__.d(__webpack_exports__,"Jg",(function(){return __wbindgen_closure_wrapper477})),__webpack_require__.d(__webpack_exports__,"Kg",(function(){return __wbindgen_closure_wrapper479})),__webpack_require__.d(__webpack_exports__,"Lg",(function(){return __wbindgen_closure_wrapper481})),__webpack_require__.d(__webpack_exports__,"Mg",(function(){return __wbindgen_closure_wrapper483})),__webpack_require__.d(__webpack_exports__,"Ng",(function(){return __wbindgen_closure_wrapper485})),__webpack_require__.d(__webpack_exports__,"Og",(function(){return __wbindgen_closure_wrapper487})),__webpack_require__.d(__webpack_exports__,"Pg",(function(){return __wbindgen_closure_wrapper489})),__webpack_require__.d(__webpack_exports__,"Qg",(function(){return __wbindgen_closure_wrapper491})),__webpack_require__.d(__webpack_exports__,"Rg",(function(){return __wbindgen_closure_wrapper493})),__webpack_require__.d(__webpack_exports__,"Tg",(function(){return __wbindgen_closure_wrapper960})),__webpack_require__.d(__webpack_exports__,"Sg",(function(){return __wbindgen_closure_wrapper5083}));var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(93),core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__),core_js_modules_es_typed_array_at_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(263),core_js_modules_es_typed_array_at_js__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(core_js_modules_es_typed_array_at_js__WEBPACK_IMPORTED_MODULE_1__),core_js_modules_es_typed_array_find_last_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(267),core_js_modules_es_typed_array_find_last_js__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(core_js_modules_es_typed_array_find_last_js__WEBPACK_IMPORTED_MODULE_2__),core_js_modules_es_typed_array_find_last_index_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(270),core_js_modules_es_typed_array_find_last_index_js__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(core_js_modules_es_typed_array_find_last_index_js__WEBPACK_IMPORTED_MODULE_3__),core_js_modules_es_typed_array_set_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(271),core_js_modules_es_typed_array_set_js__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(core_js_modules_es_typed_array_set_js__WEBPACK_IMPORTED_MODULE_4__),core_js_modules_es_typed_array_to_reversed_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(274),core_js_modules_es_typed_array_to_reversed_js__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(core_js_modules_es_typed_array_to_reversed_js__WEBPACK_IMPORTED_MODULE_5__),core_js_modules_es_typed_array_to_sorted_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(276),core_js_modules_es_typed_array_to_sorted_js__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(core_js_modules_es_typed_array_to_sorted_js__WEBPACK_IMPORTED_MODULE_6__),core_js_modules_es_typed_array_with_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(278),core_js_modules_es_typed_array_with_js__WEBPACK_IMPORTED_MODULE_7___default=__webpack_require__.n(core_js_modules_es_typed_array_with_js__WEBPACK_IMPORTED_MODULE_7__),core_js_modules_es_error_cause_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(100),core_js_modules_es_error_cause_js__WEBPACK_IMPORTED_MODULE_8___default=__webpack_require__.n(core_js_modules_es_error_cause_js__WEBPACK_IMPORTED_MODULE_8__),core_js_modules_es_reflect_to_string_tag_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(282),core_js_modules_es_reflect_to_string_tag_js__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(core_js_modules_es_reflect_to_string_tag_js__WEBPACK_IMPORTED_MODULE_9__),core_js_modules_web_self_js__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(284),core_js_modules_web_self_js__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(core_js_modules_web_self_js__WEBPACK_IMPORTED_MODULE_10__);const lAudioContext="undefined"!=typeof AudioContext?AudioContext:"undefined"!=typeof webkitAudioContext?webkitAudioContext:void 0;let wasm;function __wbg_set_wasm(e){wasm=e}const heap=new Array(128).fill(void 0);function getObject(e){return heap[e]}heap.push(void 0,null,!0,!1);let heap_next=heap.length;function dropObject(e){e<132||(heap[e]=heap_next,heap_next=e)}function takeObject(e){const _=getObject(e);return dropObject(e),_}function addHeapObject(e){heap_next===heap.length&&heap.push(heap.length+1);const _=heap_next;return heap_next=heap[_],heap[_]=e,_}const lTextDecoder="undefined"==typeof TextDecoder?(0,module.require)("util").TextDecoder:TextDecoder;let cachedTextDecoder=new lTextDecoder("utf-8",{ignoreBOM:!0,fatal:!0});cachedTextDecoder.decode();let cachedUint8Memory0=null;function getUint8Memory0(){return null!==cachedUint8Memory0&&0!==cachedUint8Memory0.byteLength||(cachedUint8Memory0=new Uint8Array(wasm.memory.buffer)),cachedUint8Memory0}function getStringFromWasm0(e,_){return e>>>=0,cachedTextDecoder.decode(getUint8Memory0().subarray(e,e+_))}let WASM_VECTOR_LEN=0;const lTextEncoder="undefined"==typeof TextEncoder?(0,module.require)("util").TextEncoder:TextEncoder;let cachedTextEncoder=new lTextEncoder("utf-8");const encodeString="function"==typeof cachedTextEncoder.encodeInto?function(e,_){return cachedTextEncoder.encodeInto(e,_)}:function(e,_){const t=cachedTextEncoder.encode(e);return _.set(t),{read:e.length,written:t.length}};function passStringToWasm0(e,_,t){if(void 0===t){const t=cachedTextEncoder.encode(e),r=_(t.length,1)>>>0;return getUint8Memory0().subarray(r,r+t.length).set(t),WASM_VECTOR_LEN=t.length,r}let r=e.length,n=_(r,1)>>>0;const c=getUint8Memory0();let b=0;for(;b127)break;c[n+b]=_}if(b!==r){0!==b&&(e=e.slice(b)),n=t(n,r,r=b+3*e.length,1)>>>0;const _=getUint8Memory0().subarray(n+b,n+r);b+=encodeString(e,_).written}return WASM_VECTOR_LEN=b,n}function isLikeNone(e){return null==e}let cachedInt32Memory0=null;function getInt32Memory0(){return null!==cachedInt32Memory0&&0!==cachedInt32Memory0.byteLength||(cachedInt32Memory0=new Int32Array(wasm.memory.buffer)),cachedInt32Memory0}let cachedFloat64Memory0=null;function getFloat64Memory0(){return null!==cachedFloat64Memory0&&0!==cachedFloat64Memory0.byteLength||(cachedFloat64Memory0=new Float64Array(wasm.memory.buffer)),cachedFloat64Memory0}function debugString(e){const _=typeof e;if("number"==_||"boolean"==_||null==e)return""+e;if("string"==_)return`"${e}"`;if("symbol"==_){const _=e.description;return null==_?"Symbol":`Symbol(${_})`}if("function"==_){const _=e.name;return"string"==typeof _&&_.length>0?`Function(${_})`:"Function"}if(Array.isArray(e)){const _=e.length;let t="[";_>0&&(t+=debugString(e[0]));for(let r=1;r<_;r++)t+=", "+debugString(e[r]);return t+="]",t}const t=/\[object ([^\]]+)\]/.exec(toString.call(e));let r;if(!(t.length>1))return toString.call(e);if(r=t[1],"Object"==r)try{return"Object("+JSON.stringify(e)+")"}catch(e){return"Object"}return e instanceof Error?`${e.name}: ${e.message}\n${e.stack}`:r}function makeMutClosure(e,_,t,r){const n={a:e,b:_,cnt:1,dtor:t},c=(...e)=>{n.cnt++;const _=n.a;n.a=0;try{return r(_,n.b,...e)}finally{0==--n.cnt?wasm.__wbindgen_export_2.get(n.dtor)(_,n.b):n.a=_}};return c.original=n,c}function __wbg_adapter_26(e,_,t){wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h06aef143a3ba871b(e,_,addHeapObject(t))}function __wbg_adapter_37(e,_){wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h15be52a5593d0a12(e,_)}function __wbg_adapter_46(e,_){wasm.wasm_bindgen__convert__closures__invoke0_mut__hd61e4400912d50b3(e,_)}function __wbg_adapter_49(e,_,t){wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(e,_,addHeapObject(t))}function start(){wasm.start()}let cachedFloat32Memory0=null;function getFloat32Memory0(){return null!==cachedFloat32Memory0&&0!==cachedFloat32Memory0.byteLength||(cachedFloat32Memory0=new Float32Array(wasm.memory.buffer)),cachedFloat32Memory0}function getArrayF32FromWasm0(e,_){return e>>>=0,getFloat32Memory0().subarray(e/4,e/4+_)}function getArrayI32FromWasm0(e,_){return e>>>=0,getInt32Memory0().subarray(e/4,e/4+_)}let cachedUint32Memory0=null;function getUint32Memory0(){return null!==cachedUint32Memory0&&0!==cachedUint32Memory0.byteLength||(cachedUint32Memory0=new Uint32Array(wasm.memory.buffer)),cachedUint32Memory0}function getArrayU32FromWasm0(e,_){return e>>>=0,getUint32Memory0().subarray(e/4,e/4+_)}function handleError(e,_){try{return e.apply(this,_)}catch(e){wasm.__wbindgen_exn_store(addHeapObject(e))}}function __wbindgen_cb_drop(e){const _=takeObject(e).original;if(1==_.cnt--)return _.a=0,!0;return!1}function __wbindgen_object_drop_ref(e){takeObject(e)}function __wbindgen_object_clone_ref(e){return addHeapObject(getObject(e))}function __wbindgen_string_new(e,_){return addHeapObject(getStringFromWasm0(e,_))}function __wbg_new_abda76e883ba8a5f(){return addHeapObject(new Error)}function __wbg_stack_658279fe44541cf6(e,_){const t=passStringToWasm0(getObject(_).stack,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_error_f851667af71bcfc6(e,_){let t,r;try{t=e,r=_,console.error(getStringFromWasm0(e,_))}finally{wasm.__wbindgen_free(t,r,1)}}function __wbindgen_boolean_get(e){const _=getObject(e);return"boolean"==typeof _?_?1:0:2}function __wbindgen_string_get(e,_){const t=getObject(_),r="string"==typeof t?t:void 0;var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbindgen_number_get(e,_){const t=getObject(_),r="number"==typeof t?t:void 0;getFloat64Memory0()[e/8+1]=isLikeNone(r)?0:r,getInt32Memory0()[e/4+0]=!isLikeNone(r)}function __wbindgen_number_new(e){return addHeapObject(e)}function __wbg_instanceof_WebGl2RenderingContext_f921526c513bf717(e){let _;try{_=getObject(e)instanceof WebGL2RenderingContext}catch{_=!1}return _}function __wbg_beginQuery_d338463adf721553(e,_,t){getObject(e).beginQuery(_>>>0,getObject(t))}function __wbg_bindBufferRange_d8a5ebc8ea8be507(e,_,t,r,n,c){getObject(e).bindBufferRange(_>>>0,t>>>0,getObject(r),n,c)}function __wbg_bindSampler_d74e398b68cf5980(e,_,t){getObject(e).bindSampler(_>>>0,getObject(t))}function __wbg_bindVertexArray_8863a216d7b0a339(e,_){getObject(e).bindVertexArray(getObject(_))}function __wbg_blitFramebuffer_e6642748dd06d47e(e,_,t,r,n,c,b,a,u,f,o){getObject(e).blitFramebuffer(_,t,r,n,c,b,a,u,f>>>0,o>>>0)}function __wbg_bufferData_496bbb31639d9850(e,_,t,r){getObject(e).bufferData(_>>>0,t,r>>>0)}function __wbg_bufferData_21334671c4ba6004(e,_,t,r){getObject(e).bufferData(_>>>0,getObject(t),r>>>0)}function __wbg_bufferSubData_c472b93c9e272eac(e,_,t,r){getObject(e).bufferSubData(_>>>0,t,getObject(r))}function __wbg_clearBufferfi_25bcd35b825f629d(e,_,t,r,n){getObject(e).clearBufferfi(_>>>0,t,r,n)}function __wbg_clearBufferfv_9de0cb45cc5a012b(e,_,t,r,n){getObject(e).clearBufferfv(_>>>0,t,getArrayF32FromWasm0(r,n))}function __wbg_clearBufferiv_fc2f8bce2930c586(e,_,t,r,n){getObject(e).clearBufferiv(_>>>0,t,getArrayI32FromWasm0(r,n))}function __wbg_clearBufferuiv_2f6d220a31eabca4(e,_,t,r,n){getObject(e).clearBufferuiv(_>>>0,t,getArrayU32FromWasm0(r,n))}function __wbg_clientWaitSync_6a74725ec890efdd(e,_,t,r){return getObject(e).clientWaitSync(getObject(_),t>>>0,r>>>0)}function __wbg_compressedTexSubImage2D_945ba54869f3a612(e,_,t,r,n,c,b,a,u,f){getObject(e).compressedTexSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u,f)}function __wbg_compressedTexSubImage2D_ed56fa2f82a839b1(e,_,t,r,n,c,b,a,u){getObject(e).compressedTexSubImage2D(_>>>0,t,r,n,c,b,a>>>0,getObject(u))}function __wbg_compressedTexSubImage3D_4cebeae1440fdc14(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).compressedTexSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o,d)}function __wbg_compressedTexSubImage3D_0ae61aaa91089745(e,_,t,r,n,c,b,a,u,f,o){getObject(e).compressedTexSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,getObject(o))}function __wbg_copyBufferSubData_d112912c90270156(e,_,t,r,n,c){getObject(e).copyBufferSubData(_>>>0,t>>>0,r,n,c)}function __wbg_copyTexSubImage3D_9fa5e9e7b16cf09d(e,_,t,r,n,c,b,a,u,f){getObject(e).copyTexSubImage3D(_>>>0,t,r,n,c,b,a,u,f)}function __wbg_createQuery_2ef2dc0f01a4a8e3(e){const _=getObject(e).createQuery();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createSampler_039ecd204675292b(e){const _=getObject(e).createSampler();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createVertexArray_51d51e1e1e13e9f6(e){const _=getObject(e).createVertexArray();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_deleteQuery_0c64c5200cdc57a6(e,_){getObject(e).deleteQuery(getObject(_))}function __wbg_deleteSampler_ce5b8e120f96fc1a(e,_){getObject(e).deleteSampler(getObject(_))}function __wbg_deleteSync_1b05dfcc176e7466(e,_){getObject(e).deleteSync(getObject(_))}function __wbg_deleteVertexArray_3e4f2e2ff7f05a19(e,_){getObject(e).deleteVertexArray(getObject(_))}function __wbg_drawArraysInstanced_8fb13fe9faf95212(e,_,t,r,n){getObject(e).drawArraysInstanced(_>>>0,t,r,n)}function __wbg_drawBuffers_15d26e17a8d24ee0(e,_){getObject(e).drawBuffers(getObject(_))}function __wbg_drawElementsInstanced_dcf53461a977d44c(e,_,t,r,n,c){getObject(e).drawElementsInstanced(_>>>0,t,r>>>0,n,c)}function __wbg_endQuery_faf7eb231d6f2a66(e,_){getObject(e).endQuery(_>>>0)}function __wbg_fenceSync_d68dcbdcdd134d92(e,_,t){const r=getObject(e).fenceSync(_>>>0,t>>>0);return isLikeNone(r)?0:addHeapObject(r)}function __wbg_framebufferTextureLayer_a92788e5f0409234(e,_,t,r,n,c){getObject(e).framebufferTextureLayer(_>>>0,t>>>0,getObject(r),n,c)}function __wbg_getBufferSubData_8710cc73621fc332(e,_,t,r){getObject(e).getBufferSubData(_>>>0,t,getObject(r))}function __wbg_getIndexedParameter_4f004dc25c3d15a9(){return handleError((function(e,_,t){return addHeapObject(getObject(e).getIndexedParameter(_>>>0,t>>>0))}),arguments)}function __wbg_getSyncParameter_d93ec7f6bb11274c(e,_,t){return addHeapObject(getObject(e).getSyncParameter(getObject(_),t>>>0))}function __wbg_getUniformBlockIndex_99c15053c9a87c73(e,_,t,r){return getObject(e).getUniformBlockIndex(getObject(_),getStringFromWasm0(t,r))}function __wbg_invalidateFramebuffer_03bd99588b15d627(){return handleError((function(e,_,t){getObject(e).invalidateFramebuffer(_>>>0,getObject(t))}),arguments)}function __wbg_readBuffer_c426fe18344296ff(e,_){getObject(e).readBuffer(_>>>0)}function __wbg_readPixels_99fda83f6ca7ec72(){return handleError((function(e,_,t,r,n,c,b,a){getObject(e).readPixels(_,t,r,n,c>>>0,b>>>0,getObject(a))}),arguments)}function __wbg_readPixels_9634f0dcfb54667c(){return handleError((function(e,_,t,r,n,c,b,a){getObject(e).readPixels(_,t,r,n,c>>>0,b>>>0,a)}),arguments)}function __wbg_renderbufferStorageMultisample_9260e2e620c949e5(e,_,t,r,n,c){getObject(e).renderbufferStorageMultisample(_>>>0,t,r>>>0,n,c)}function __wbg_samplerParameterf_1c7562ef061b803b(e,_,t,r){getObject(e).samplerParameterf(getObject(_),t>>>0,r)}function __wbg_samplerParameteri_0fee083bc48e70ee(e,_,t,r){getObject(e).samplerParameteri(getObject(_),t>>>0,r)}function __wbg_texStorage2D_6665d01025a7e7fc(e,_,t,r,n,c){getObject(e).texStorage2D(_>>>0,t,r>>>0,n,c)}function __wbg_texStorage3D_c01c31c1b02d75fd(e,_,t,r,n,c,b){getObject(e).texStorage3D(_>>>0,t,r>>>0,n,c,b)}function __wbg_texSubImage2D_d2841ded12a8aa66(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage2D_bccf4e250f1ce1b8(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,f)}),arguments)}function __wbg_texSubImage2D_780a7c889dc20a98(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage2D_b5bb36f2f54b4264(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage2D_a297114050ea1098(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage3D_43f39a73ed02fae3(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,d)}),arguments)}function __wbg_texSubImage3D_ffdccca1422b482a(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_texSubImage3D_69d5e09d45e0251c(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_texSubImage3D_ae3ed5d0154c346c(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_texSubImage3D_80693fc2c7855e4d(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_uniform2fv_2b473f6dce24c898(e,_,t,r){getObject(e).uniform2fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform2iv_fdaa3cd258d3451e(e,_,t,r){getObject(e).uniform2iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform3fv_3e55033ca16ec6ab(e,_,t,r){getObject(e).uniform3fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform3iv_3d3ed90c76e6777e(e,_,t,r){getObject(e).uniform3iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform4fv_26ec0c9d7bf6d7c6(e,_,t,r){getObject(e).uniform4fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform4iv_2be6b77c47b90d81(e,_,t,r){getObject(e).uniform4iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniformBlockBinding_0dc4bd81bb4ccb6a(e,_,t,r){getObject(e).uniformBlockBinding(getObject(_),t>>>0,r>>>0)}function __wbg_uniformMatrix2fv_1ab7aeb8562ea3dd(e,_,t,r,n){getObject(e).uniformMatrix2fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix3fv_0b151be4d76ee66b(e,_,t,r,n){getObject(e).uniformMatrix3fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix4fv_766b5ba343983038(e,_,t,r,n){getObject(e).uniformMatrix4fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_vertexAttribDivisor_197e2e23e3fbde7f(e,_,t){getObject(e).vertexAttribDivisor(_>>>0,t>>>0)}function __wbg_vertexAttribIPointer_6f8540e358f8a547(e,_,t,r,n,c){getObject(e).vertexAttribIPointer(_>>>0,t,r>>>0,n,c)}function __wbg_activeTexture_799bf1387e911c27(e,_){getObject(e).activeTexture(_>>>0)}function __wbg_attachShader_47256b6b3d42a22e(e,_,t){getObject(e).attachShader(getObject(_),getObject(t))}function __wbg_bindBuffer_24f6010e273fa400(e,_,t){getObject(e).bindBuffer(_>>>0,getObject(t))}function __wbg_bindFramebuffer_a9573e340dab20fe(e,_,t){getObject(e).bindFramebuffer(_>>>0,getObject(t))}function __wbg_bindRenderbuffer_54c404711f9b6958(e,_,t){getObject(e).bindRenderbuffer(_>>>0,getObject(t))}function __wbg_bindTexture_92d6d7f8bff9531e(e,_,t){getObject(e).bindTexture(_>>>0,getObject(t))}function __wbg_blendColor_7974f09cb60d2be0(e,_,t,r,n){getObject(e).blendColor(_,t,r,n)}function __wbg_blendEquation_12146cb96dc1bcd9(e,_){getObject(e).blendEquation(_>>>0)}function __wbg_blendEquationSeparate_205526dad772d160(e,_,t){getObject(e).blendEquationSeparate(_>>>0,t>>>0)}function __wbg_blendFunc_533de6de45b80a09(e,_,t){getObject(e).blendFunc(_>>>0,t>>>0)}function __wbg_blendFuncSeparate_fbf93dee3e5ce456(e,_,t,r,n){getObject(e).blendFuncSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_colorMask_fba1e2efd891e2ac(e,_,t,r,n){getObject(e).colorMask(0!==_,0!==t,0!==r,0!==n)}function __wbg_compileShader_6bf78b425d5c98e1(e,_){getObject(e).compileShader(getObject(_))}function __wbg_copyTexSubImage2D_26685100d5f2b4c0(e,_,t,r,n,c,b,a,u){getObject(e).copyTexSubImage2D(_>>>0,t,r,n,c,b,a,u)}function __wbg_createBuffer_323425af422748ac(e){const _=getObject(e).createBuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createFramebuffer_1684a99697ac9563(e){const _=getObject(e).createFramebuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createProgram_4eaf3b97b5747a62(e){const _=getObject(e).createProgram();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createRenderbuffer_3e6dd356d7897ed7(e){const _=getObject(e).createRenderbuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createShader_429776c9dd6fb87b(e,_){const t=getObject(e).createShader(_>>>0);return isLikeNone(t)?0:addHeapObject(t)}function __wbg_createTexture_1bf4d6fec570124b(e){const _=getObject(e).createTexture();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_cullFace_6daa9f2aa42b4620(e,_){getObject(e).cullFace(_>>>0)}function __wbg_deleteBuffer_2c09d03fa4b0bd08(e,_){getObject(e).deleteBuffer(getObject(_))}function __wbg_deleteFramebuffer_edd16bb8df6a8e0d(e,_){getObject(e).deleteFramebuffer(getObject(_))}function __wbg_deleteProgram_53a32852f245b839(e,_){getObject(e).deleteProgram(getObject(_))}function __wbg_deleteRenderbuffer_134040051fcc1ba5(e,_){getObject(e).deleteRenderbuffer(getObject(_))}function __wbg_deleteShader_7c1222349324b5e2(e,_){getObject(e).deleteShader(getObject(_))}function __wbg_deleteTexture_4fcfea73cd8f6214(e,_){getObject(e).deleteTexture(getObject(_))}function __wbg_depthFunc_fb41ad353d07948d(e,_){getObject(e).depthFunc(_>>>0)}function __wbg_depthMask_6a4ff02cd2a2702e(e,_){getObject(e).depthMask(0!==_)}function __wbg_depthRange_a5647a9040aec55b(e,_,t){getObject(e).depthRange(_,t)}function __wbg_disable_e02106ca6c7002d6(e,_){getObject(e).disable(_>>>0)}function __wbg_disableVertexAttribArray_6d57776c8f642f44(e,_){getObject(e).disableVertexAttribArray(_>>>0)}function __wbg_drawArrays_c91ce3f736bf1f2a(e,_,t,r){getObject(e).drawArrays(_>>>0,t,r)}function __wbg_enable_195891416c520019(e,_){getObject(e).enable(_>>>0)}function __wbg_enableVertexAttribArray_8804480c2ea0bb72(e,_){getObject(e).enableVertexAttribArray(_>>>0)}function __wbg_framebufferRenderbuffer_3ec0983918c2b69d(e,_,t,r,n){getObject(e).framebufferRenderbuffer(_>>>0,t>>>0,r>>>0,getObject(n))}function __wbg_framebufferTexture2D_e88fcbd7f8523bb8(e,_,t,r,n,c){getObject(e).framebufferTexture2D(_>>>0,t>>>0,r>>>0,getObject(n),c)}function __wbg_frontFace_786a036f1d643925(e,_){getObject(e).frontFace(_>>>0)}function __wbg_getActiveUniform_78367ddc7339640b(e,_,t){const r=getObject(e).getActiveUniform(getObject(_),t>>>0);return isLikeNone(r)?0:addHeapObject(r)}function __wbg_getExtension_77909f6d51d49d4d(){return handleError((function(e,_,t){const r=getObject(e).getExtension(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}),arguments)}function __wbg_getParameter_55b36a787dbbfb74(){return handleError((function(e,_){return addHeapObject(getObject(e).getParameter(_>>>0))}),arguments)}function __wbg_getProgramInfoLog_b81bc53188e286fa(e,_,t){const r=getObject(_).getProgramInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getProgramParameter_35522a0bfdfaad27(e,_,t){return addHeapObject(getObject(e).getProgramParameter(getObject(_),t>>>0))}function __wbg_getShaderInfoLog_968b93e75477d725(e,_,t){const r=getObject(_).getShaderInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getShaderParameter_ac2727ae4fe7648e(e,_,t){return addHeapObject(getObject(e).getShaderParameter(getObject(_),t>>>0))}function __wbg_getSupportedExtensions_fafc31aab913037d(e){const _=getObject(e).getSupportedExtensions();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_getUniformLocation_9f6eb60c560a347b(e,_,t,r){const n=getObject(e).getUniformLocation(getObject(_),getStringFromWasm0(t,r));return isLikeNone(n)?0:addHeapObject(n)}function __wbg_linkProgram_33998194075d71fb(e,_){getObject(e).linkProgram(getObject(_))}function __wbg_pixelStorei_f3a24990aa352fc7(e,_,t){getObject(e).pixelStorei(_>>>0,t)}function __wbg_polygonOffset_faca8e73770272ff(e,_,t){getObject(e).polygonOffset(_,t)}function __wbg_renderbufferStorage_987d1af7c9faf5dd(e,_,t,r,n){getObject(e).renderbufferStorage(_>>>0,t>>>0,r,n)}function __wbg_scissor_e8e41e1c0a9817c8(e,_,t,r,n){getObject(e).scissor(_,t,r,n)}function __wbg_shaderSource_1cb7c64dc7d1a500(e,_,t,r){getObject(e).shaderSource(getObject(_),getStringFromWasm0(t,r))}function __wbg_stencilFuncSeparate_8ff94e24a50a3c45(e,_,t,r,n){getObject(e).stencilFuncSeparate(_>>>0,t>>>0,r,n>>>0)}function __wbg_stencilMask_641f92999dd3c3de(e,_){getObject(e).stencilMask(_>>>0)}function __wbg_stencilMaskSeparate_6b2c8ef22fb3b6d1(e,_,t){getObject(e).stencilMaskSeparate(_>>>0,t>>>0)}function __wbg_stencilOpSeparate_38925591af8feb44(e,_,t,r,n){getObject(e).stencilOpSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_texParameteri_85dad939f62a15aa(e,_,t,r){getObject(e).texParameteri(_>>>0,t>>>0,r)}function __wbg_uniform1f_88379f4e2630bc66(e,_,t){getObject(e).uniform1f(getObject(_),t)}function __wbg_uniform1i_d2e61a6a43889648(e,_,t){getObject(e).uniform1i(getObject(_),t)}function __wbg_uniform4f_a9fd337d4b07f595(e,_,t,r,n,c){getObject(e).uniform4f(getObject(_),t,r,n,c)}function __wbg_useProgram_3683cf6f60939dcd(e,_){getObject(e).useProgram(getObject(_))}function __wbg_vertexAttribPointer_316ffe2f0458fde7(e,_,t,r,n,c,b){getObject(e).vertexAttribPointer(_>>>0,t,r>>>0,0!==n,c,b)}function __wbg_viewport_fad1ce9e18f741c0(e,_,t,r,n){getObject(e).viewport(_,t,r,n)}function __wbg_instanceof_Window_9029196b662bc42a(e){let _;try{_=getObject(e)instanceof Window}catch{_=!1}return _}function __wbg_document_f7ace2b956f30a4f(e){const _=getObject(e).document;return isLikeNone(_)?0:addHeapObject(_)}function __wbg_innerWidth_ebe07ce5463ff293(){return handleError((function(e){return addHeapObject(getObject(e).innerWidth)}),arguments)}function __wbg_innerHeight_2dd06d8cf68f1d7d(){return handleError((function(e){return addHeapObject(getObject(e).innerHeight)}),arguments)}function __wbg_devicePixelRatio_f9de7bddca0eaf20(e){return getObject(e).devicePixelRatio}function __wbg_matchMedia_12ef69056e32d0b3(){return handleError((function(e,_,t){const r=getObject(e).matchMedia(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}),arguments)}function __wbg_get_cb7c1c2da725c920(e,_,t){const r=getObject(e)[getStringFromWasm0(_,t)];return isLikeNone(r)?0:addHeapObject(r)}function __wbg_cancelAnimationFrame_9b68e9588c6543bc(){return handleError((function(e,_){getObject(e).cancelAnimationFrame(_)}),arguments)}function __wbg_requestAnimationFrame_d082200514b6674d(){return handleError((function(e,_){return getObject(e).requestAnimationFrame(getObject(_))}),arguments)}function __wbg_clearTimeout_220be2fa0577b342(e,_){getObject(e).clearTimeout(_)}function __wbg_setTimeout_eb1a0d116c26d9f6(){return handleError((function(e,_,t){return getObject(e).setTimeout(getObject(_),t)}),arguments)}function __wbg_fullscreenElement_07d5b77ef6c958c1(e){const _=getObject(e).fullscreenElement;return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createElement_4891554b28d3388b(){return handleError((function(e,_,t){return addHeapObject(getObject(e).createElement(getStringFromWasm0(_,t)))}),arguments)}function __wbg_getElementById_cc0e0d931b0d9a28(e,_,t){const r=getObject(e).getElementById(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}function __wbg_querySelector_52ded52c20e23921(){return handleError((function(e,_,t){const r=getObject(e).querySelector(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}),arguments)}function __wbg_getBoundingClientRect_ac9db8cf97ca8083(e){return addHeapObject(getObject(e).getBoundingClientRect())}function __wbg_requestFullscreen_3545278bcd44910c(){return handleError((function(e){getObject(e).requestFullscreen()}),arguments)}function __wbg_setAttribute_e7e80b478b7b8b2f(){return handleError((function(e,_,t,r,n){getObject(e).setAttribute(getStringFromWasm0(_,t),getStringFromWasm0(r,n))}),arguments)}function __wbg_setPointerCapture_e7c29336490bba19(){return handleError((function(e,_){getObject(e).setPointerCapture(_)}),arguments)}function __wbg_style_3801009b2339aa94(e){return addHeapObject(getObject(e).style)}function __wbg_bufferData_92a3e0b745b0d726(e,_,t,r){getObject(e).bufferData(_>>>0,t,r>>>0)}function __wbg_bufferData_a11a9f65f31e7256(e,_,t,r){getObject(e).bufferData(_>>>0,getObject(t),r>>>0)}function __wbg_bufferSubData_fca6f1c10273be21(e,_,t,r){getObject(e).bufferSubData(_>>>0,t,getObject(r))}function __wbg_compressedTexSubImage2D_21078c6de0a71aad(e,_,t,r,n,c,b,a,u){getObject(e).compressedTexSubImage2D(_>>>0,t,r,n,c,b,a>>>0,getObject(u))}function __wbg_readPixels_91b0d8854de90477(){return handleError((function(e,_,t,r,n,c,b,a){getObject(e).readPixels(_,t,r,n,c>>>0,b>>>0,getObject(a))}),arguments)}function __wbg_texSubImage2D_f1a31f8045b7f831(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_uniform2fv_c928f6ba0085b381(e,_,t,r){getObject(e).uniform2fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform2iv_7e5f8e7c2f4d4d6a(e,_,t,r){getObject(e).uniform2iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform3fv_1aba437b913c1926(e,_,t,r){getObject(e).uniform3fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform3iv_23751fe4dfcdf539(e,_,t,r){getObject(e).uniform3iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform4fv_7c51c2251d851cb2(e,_,t,r){getObject(e).uniform4fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform4iv_27b49984e9c5d90a(e,_,t,r){getObject(e).uniform4iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniformMatrix2fv_f8f3ef807f196bf1(e,_,t,r,n){getObject(e).uniformMatrix2fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix3fv_341eec37953e50c5(e,_,t,r,n){getObject(e).uniformMatrix3fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix4fv_465ab8de531f4f78(e,_,t,r,n){getObject(e).uniformMatrix4fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_activeTexture_93b4de60af07da9c(e,_){getObject(e).activeTexture(_>>>0)}function __wbg_attachShader_b65b695055670cb5(e,_,t){getObject(e).attachShader(getObject(_),getObject(t))}function __wbg_bindBuffer_313561e5bc0e533f(e,_,t){getObject(e).bindBuffer(_>>>0,getObject(t))}function __wbg_bindFramebuffer_56bf6536a4ced0ec(e,_,t){getObject(e).bindFramebuffer(_>>>0,getObject(t))}function __wbg_bindRenderbuffer_559c7c6b6676dddd(e,_,t){getObject(e).bindRenderbuffer(_>>>0,getObject(t))}function __wbg_bindTexture_9cb5c770d1ba2cca(e,_,t){getObject(e).bindTexture(_>>>0,getObject(t))}function __wbg_blendColor_b9006ef6c450acd0(e,_,t,r,n){getObject(e).blendColor(_,t,r,n)}function __wbg_blendEquation_f31ce08020786a09(e,_){getObject(e).blendEquation(_>>>0)}function __wbg_blendEquationSeparate_7ec5e34f066e44f8(e,_,t){getObject(e).blendEquationSeparate(_>>>0,t>>>0)}function __wbg_blendFunc_fbe9d3a688fe71c3(e,_,t){getObject(e).blendFunc(_>>>0,t>>>0)}function __wbg_blendFuncSeparate_7547ade0a7dfade2(e,_,t,r,n){getObject(e).blendFuncSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_colorMask_7cbd7a102954ede9(e,_,t,r,n){getObject(e).colorMask(0!==_,0!==t,0!==r,0!==n)}function __wbg_compileShader_d88d0a8cd9b72b4d(e,_){getObject(e).compileShader(getObject(_))}function __wbg_copyTexSubImage2D_3029f8dfe7543ab6(e,_,t,r,n,c,b,a,u){getObject(e).copyTexSubImage2D(_>>>0,t,r,n,c,b,a,u)}function __wbg_createBuffer_59051f4461e7c5e2(e){const _=getObject(e).createBuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createFramebuffer_223c1212ad76affc(e){const _=getObject(e).createFramebuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createProgram_88dbe21c0b682e1a(e){const _=getObject(e).createProgram();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createRenderbuffer_bcb61b756ba21490(e){const _=getObject(e).createRenderbuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createShader_9d7d388633caad18(e,_){const t=getObject(e).createShader(_>>>0);return isLikeNone(t)?0:addHeapObject(t)}function __wbg_createTexture_9d0bb4d741b8ad76(e){const _=getObject(e).createTexture();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_cullFace_4c086dc1d86a19b5(e,_){getObject(e).cullFace(_>>>0)}function __wbg_deleteBuffer_cdc6b9c73f54aff7(e,_){getObject(e).deleteBuffer(getObject(_))}function __wbg_deleteFramebuffer_fcc10cb143c6573d(e,_){getObject(e).deleteFramebuffer(getObject(_))}function __wbg_deleteProgram_d8d7fc79ba83b256(e,_){getObject(e).deleteProgram(getObject(_))}function __wbg_deleteRenderbuffer_edf9e1b4e0a1e005(e,_){getObject(e).deleteRenderbuffer(getObject(_))}function __wbg_deleteShader_9a2f85efe5cb3706(e,_){getObject(e).deleteShader(getObject(_))}function __wbg_deleteTexture_a883356c5034d482(e,_){getObject(e).deleteTexture(getObject(_))}function __wbg_depthFunc_4eda7b4e682acbad(e,_){getObject(e).depthFunc(_>>>0)}function __wbg_depthMask_a3071e13bb087102(e,_){getObject(e).depthMask(0!==_)}function __wbg_depthRange_ff5298a73fd02650(e,_,t){getObject(e).depthRange(_,t)}function __wbg_disable_5cf2070641fa2ed7(e,_){getObject(e).disable(_>>>0)}function __wbg_disableVertexAttribArray_8dacd44e21adcaa2(e,_){getObject(e).disableVertexAttribArray(_>>>0)}function __wbg_drawArrays_d5c7dc2b2376c85a(e,_,t,r){getObject(e).drawArrays(_>>>0,t,r)}function __wbg_enable_8965e69c596f0a94(e,_){getObject(e).enable(_>>>0)}function __wbg_enableVertexAttribArray_2b0475db43533cf2(e,_){getObject(e).enableVertexAttribArray(_>>>0)}function __wbg_framebufferRenderbuffer_d80f5381d429bc45(e,_,t,r,n){getObject(e).framebufferRenderbuffer(_>>>0,t>>>0,r>>>0,getObject(n))}function __wbg_framebufferTexture2D_953e69a8bec22fa9(e,_,t,r,n,c){getObject(e).framebufferTexture2D(_>>>0,t>>>0,r>>>0,getObject(n),c)}function __wbg_frontFace_0ba67b9e6365557c(e,_){getObject(e).frontFace(_>>>0)}function __wbg_getActiveUniform_87df972e841afed2(e,_,t){const r=getObject(e).getActiveUniform(getObject(_),t>>>0);return isLikeNone(r)?0:addHeapObject(r)}function __wbg_getParameter_bfab7f0b00c9d7fb(){return handleError((function(e,_){return addHeapObject(getObject(e).getParameter(_>>>0))}),arguments)}function __wbg_getProgramInfoLog_0b7af4ad85fa52a4(e,_,t){const r=getObject(_).getProgramInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getProgramParameter_2a3735278367f8bc(e,_,t){return addHeapObject(getObject(e).getProgramParameter(getObject(_),t>>>0))}function __wbg_getShaderInfoLog_979aafa403ffb252(e,_,t){const r=getObject(_).getShaderInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getShaderParameter_e8054f1d9026fb70(e,_,t){return addHeapObject(getObject(e).getShaderParameter(getObject(_),t>>>0))}function __wbg_getUniformLocation_688976233799a45a(e,_,t,r){const n=getObject(e).getUniformLocation(getObject(_),getStringFromWasm0(t,r));return isLikeNone(n)?0:addHeapObject(n)}function __wbg_linkProgram_9a2d12d120d99917(e,_){getObject(e).linkProgram(getObject(_))}function __wbg_pixelStorei_5ec932ebefd00149(e,_,t){getObject(e).pixelStorei(_>>>0,t)}function __wbg_polygonOffset_55eea57bba1b49e9(e,_,t){getObject(e).polygonOffset(_,t)}function __wbg_renderbufferStorage_4bcd9ddf1749ce26(e,_,t,r,n){getObject(e).renderbufferStorage(_>>>0,t>>>0,r,n)}function __wbg_scissor_c8ec3b1e053f3756(e,_,t,r,n){getObject(e).scissor(_,t,r,n)}function __wbg_shaderSource_f435f9b74440bb54(e,_,t,r){getObject(e).shaderSource(getObject(_),getStringFromWasm0(t,r))}function __wbg_stencilFuncSeparate_0fae0ee7c04a23b2(e,_,t,r,n){getObject(e).stencilFuncSeparate(_>>>0,t>>>0,r,n>>>0)}function __wbg_stencilMask_79416c29ac1ce3a4(e,_){getObject(e).stencilMask(_>>>0)}function __wbg_stencilMaskSeparate_19bdb57664d2c34f(e,_,t){getObject(e).stencilMaskSeparate(_>>>0,t>>>0)}function __wbg_stencilOpSeparate_18e0bd316555925f(e,_,t,r,n){getObject(e).stencilOpSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_texParameteri_1f17358e51eb8069(e,_,t,r){getObject(e).texParameteri(_>>>0,t>>>0,r)}function __wbg_uniform1f_7586c5e17ad254c9(e,_,t){getObject(e).uniform1f(getObject(_),t)}function __wbg_uniform1i_9f94ef0ba6b3cc66(e,_,t){getObject(e).uniform1i(getObject(_),t)}function __wbg_uniform4f_9aa5afa9177c6ab1(e,_,t,r,n,c){getObject(e).uniform4f(getObject(_),t,r,n,c)}function __wbg_useProgram_019eb6df066fabf5(e,_){getObject(e).useProgram(getObject(_))}function __wbg_vertexAttribPointer_ca11984ee8843c0a(e,_,t,r,n,c,b){getObject(e).vertexAttribPointer(_>>>0,t,r>>>0,0!==n,c,b)}function __wbg_viewport_6ebef187c89e2616(e,_,t,r,n){getObject(e).viewport(_,t,r,n)}function __wbg_setProperty_b95ef63ab852879e(){return handleError((function(e,_,t,r,n){getObject(e).setProperty(getStringFromWasm0(_,t),getStringFromWasm0(r,n))}),arguments)}function __wbg_addEventListener_5651108fc3ffeb6e(){return handleError((function(e,_,t,r){getObject(e).addEventListener(getStringFromWasm0(_,t),getObject(r))}),arguments)}function __wbg_addEventListener_a5963e26cd7b176b(){return handleError((function(e,_,t,r,n){getObject(e).addEventListener(getStringFromWasm0(_,t),getObject(r),getObject(n))}),arguments)}function __wbg_removeEventListener_1fa0d9594cdb0b1d(){return handleError((function(e,_,t,r,n){getObject(e).removeEventListener(getStringFromWasm0(_,t),getObject(r),getObject(n))}),arguments)}function __wbg_appendChild_51339d4cde00ee22(){return handleError((function(e,_){return addHeapObject(getObject(e).appendChild(getObject(_)))}),arguments)}function __wbg_setbuffer_beeece042e02534f(e,_){getObject(e).buffer=getObject(_)}function __wbg_setonended_83dd83b7f84cdef2(e,_){getObject(e).onended=getObject(_)}function __wbg_start_99ecc2647eb67ca6(){return handleError((function(e,_){getObject(e).start(_)}),arguments)}function __wbg_matches_07c564b5b4101cf2(e){return getObject(e).matches}function __wbg_addListener_85fb6e4bd17e8878(){return handleError((function(e,_){getObject(e).addListener(getObject(_))}),arguments)}function __wbg_removeListener_3b62020874cfc3c7(){return handleError((function(e,_){getObject(e).removeListener(getObject(_))}),arguments)}function __wbg_now_0cfdc90c97d0c24b(e){return getObject(e).now()}function __wbg_deltaX_84508d00a1050e70(e){return getObject(e).deltaX}function __wbg_deltaY_64823169afb0335d(e){return getObject(e).deltaY}function __wbg_deltaMode_1c680147cfdba8a5(e){return getObject(e).deltaMode}function __wbg_width_019b79813c2e80cf(e){return getObject(e).width}function __wbg_height_12082005add04bb5(e){return getObject(e).height}function __wbg_getSupportedProfiles_420ce044cc3114a1(e){const _=getObject(e).getSupportedProfiles();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_destination_9e793cf556243084(e){return addHeapObject(getObject(e).destination)}function __wbg_currentTime_c6831b97750b898c(e){return getObject(e).currentTime}function __wbg_newwithcontextoptions_3fb88aa326cd01e0(){return handleError((function(e){return addHeapObject(new lAudioContext(getObject(e)))}),arguments)}function __wbg_close_51aa5539747ce076(){return handleError((function(e){return addHeapObject(getObject(e).close())}),arguments)}function __wbg_createBuffer_13cd030d2b48e8fa(){return handleError((function(e,_,t,r){return addHeapObject(getObject(e).createBuffer(_>>>0,t>>>0,r))}),arguments)}function __wbg_createBufferSource_58423f6345b5f559(){return handleError((function(e){return addHeapObject(getObject(e).createBufferSource())}),arguments)}function __wbg_resume_9dc64ed7c3a65255(){return handleError((function(e){return addHeapObject(getObject(e).resume())}),arguments)}function __wbg_debug_9a6b3243fbbebb61(e){console.debug(getObject(e))}function __wbg_error_788ae33f81d3b84b(e){console.error(getObject(e))}function __wbg_error_c9309504864e78b5(e,_){console.error(getObject(e),getObject(_))}function __wbg_info_2e30e8204b29d91d(e){console.info(getObject(e))}function __wbg_log_1d3ae0273d8f4f8a(e){console.log(getObject(e))}function __wbg_warn_d60e832f9882c1b2(e){console.warn(getObject(e))}function __wbg_charCode_75cea1a3a6d66388(e){return getObject(e).charCode}function __wbg_keyCode_dfa86be31f5ef90c(e){return getObject(e).keyCode}function __wbg_altKey_612289acf855835c(e){return getObject(e).altKey}function __wbg_ctrlKey_582686fb2263dd3c(e){return getObject(e).ctrlKey}function __wbg_shiftKey_48e8701355d8e2d4(e){return getObject(e).shiftKey}function __wbg_metaKey_43193b7cc99f8914(e){return getObject(e).metaKey}function __wbg_key_8aeaa079126a9cc7(e,_){const t=passStringToWasm0(getObject(_).key,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_code_96d6322b968b2d17(e,_){const t=passStringToWasm0(getObject(_).code,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_getModifierState_5102ee8843516d2f(e,_,t){return getObject(e).getModifierState(getStringFromWasm0(_,t))}function __wbg_matches_0f7e350783b542c2(e){return getObject(e).matches}function __wbg_pointerId_701aab7b4fb073ff(e){return getObject(e).pointerId}function __wbg_pressure_e388b6fd623a3917(e){return getObject(e).pressure}function __wbg_pointerType_0009b1e4e6b0f428(e,_){const t=passStringToWasm0(getObject(_).pointerType,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_copyToChannel_6e4bd2545a53db54(){return handleError((function(e,_,t,r){getObject(e).copyToChannel(getArrayF32FromWasm0(_,t),r)}),arguments)}function __wbg_width_0b4991f5cf7c640a(e){return getObject(e).width}function __wbg_setwidth_15266a5e81f43cf0(e,_){getObject(e).width=_>>>0}function __wbg_height_8cce73e95fb10fd3(e){return getObject(e).height}function __wbg_setheight_2e9bab573f1775a6(e,_){getObject(e).height=_>>>0}function __wbg_connect_3f8f5ba805800c62(){return handleError((function(e,_){return addHeapObject(getObject(e).connect(getObject(_)))}),arguments)}function __wbg_target_f171e89c61e2bccf(e){const _=getObject(e).target;return isLikeNone(_)?0:addHeapObject(_)}function __wbg_cancelBubble_90d1c3aa2a76cbeb(e){return getObject(e).cancelBubble}function __wbg_preventDefault_24104f3f0a54546a(e){getObject(e).preventDefault()}function __wbg_stopPropagation_55539cfa2506c867(e){getObject(e).stopPropagation()}function __wbg_clientX_1a480606ab0cabaa(e){return getObject(e).clientX}function __wbg_clientY_9c7878f7faf3900f(e){return getObject(e).clientY}function __wbg_offsetX_5a58f16f6c3a41b6(e){return getObject(e).offsetX}function __wbg_offsetY_c45b4956f6429a95(e){return getObject(e).offsetY}function __wbg_ctrlKey_0a805df688b5bf42(e){return getObject(e).ctrlKey}function __wbg_shiftKey_8a070ab6169b5fa4(e){return getObject(e).shiftKey}function __wbg_altKey_6fc1761a6b7a406e(e){return getObject(e).altKey}function __wbg_metaKey_d89287be4389a3c1(e){return getObject(e).metaKey}function __wbg_button_7a095234b69de930(e){return getObject(e).button}function __wbg_buttons_d0f40e1650e3fa28(e){return getObject(e).buttons}function __wbg_movementX_966ec323c169d1a6(e){return getObject(e).movementX}function __wbg_movementY_b14b3bc8e1b31f23(e){return getObject(e).movementY}function __wbg_bindVertexArrayOES_b7d9da7e073aa6b5(e,_){getObject(e).bindVertexArrayOES(getObject(_))}function __wbg_createVertexArrayOES_6a3c3a5a68201f8f(e){const _=getObject(e).createVertexArrayOES();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_deleteVertexArrayOES_7bf4589e63d84df6(e,_){getObject(e).deleteVertexArrayOES(getObject(_))}function __wbg_size_6eb4aa794f6bf220(e){return getObject(e).size}function __wbg_type_37bb6b4936b5e027(e){return getObject(e).type}function __wbg_name_ebae3a7e89367611(e,_){const t=passStringToWasm0(getObject(_).name,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_drawBuffersWEBGL_139bf2fe0c1522d6(e,_){getObject(e).drawBuffersWEBGL(getObject(_))}function __wbg_instanceof_HtmlCanvasElement_da5f9efa0688cf6d(e){let _;try{_=getObject(e)instanceof HTMLCanvasElement}catch{_=!1}return _}function __wbg_width_2931aaedd21f1fff(e){return getObject(e).width}function __wbg_setwidth_a667a942dba6656e(e,_){getObject(e).width=_>>>0}function __wbg_height_0d36fbbeb60b0661(e){return getObject(e).height}function __wbg_setheight_a747d440760fe5aa(e,_){getObject(e).height=_>>>0}function __wbg_getContext_6d1f155bb5c1096a(){return handleError((function(e,_,t,r){const n=getObject(e).getContext(getStringFromWasm0(_,t),getObject(r));return isLikeNone(n)?0:addHeapObject(n)}),arguments)}function __wbg_videoWidth_02eadb74917aa4fc(e){return getObject(e).videoWidth}function __wbg_videoHeight_dac4c345988e5562(e){return getObject(e).videoHeight}function __wbg_drawArraysInstancedANGLE_01b862ba133350a3(e,_,t,r,n){getObject(e).drawArraysInstancedANGLE(_>>>0,t,r,n)}function __wbg_drawElementsInstancedANGLE_ea6343af8bf9c9f8(e,_,t,r,n,c){getObject(e).drawElementsInstancedANGLE(_>>>0,t,r>>>0,n,c)}function __wbg_vertexAttribDivisorANGLE_a8476eb778e16c70(e,_,t){getObject(e).vertexAttribDivisorANGLE(_>>>0,t>>>0)}function __wbg_x_6c8af74c3b4d8c09(e){return getObject(e).x}function __wbg_y_4cca2672ce1b5fc1(e){return getObject(e).y}function __wbg_framebufferTextureMultiviewOVR_4d911c3fccedc517(e,_,t,r,n,c,b){getObject(e).framebufferTextureMultiviewOVR(_>>>0,t>>>0,getObject(r),n,c,b)}function __wbg_get_44be0491f933a435(e,_){return addHeapObject(getObject(e)[_>>>0])}function __wbg_length_fff51ee6522a1a18(e){return getObject(e).length}function __wbg_new_898a68150f225f2e(){return addHeapObject(new Array)}function __wbg_newnoargs_581967eacc0e2604(e,_){return addHeapObject(new Function(getStringFromWasm0(e,_)))}function __wbg_get_97b561fb56f034b5(){return handleError((function(e,_){return addHeapObject(Reflect.get(getObject(e),getObject(_)))}),arguments)}function __wbg_call_cb65541d95d71282(){return handleError((function(e,_){return addHeapObject(getObject(e).call(getObject(_)))}),arguments)}function __wbg_new_b51585de1b234aff(){return addHeapObject(new Object)}function __wbg_self_1ff1d729e9aae938(){return handleError((function(){return addHeapObject(self.self)}),arguments)}function __wbg_window_5f4faef6c12b79ec(){return handleError((function(){return addHeapObject(window.window)}),arguments)}function __wbg_globalThis_1d39714405582d3c(){return handleError((function(){return addHeapObject(globalThis.globalThis)}),arguments)}function __wbg_global_651f05c6a0944d1c(){return handleError((function(){return addHeapObject(global.global)}),arguments)}function __wbindgen_is_undefined(e){return void 0===getObject(e)}function __wbg_eval_8c72ad5eafe427f2(){return handleError((function(arg0,arg1){const ret=eval(getStringFromWasm0(arg0,arg1));return addHeapObject(ret)}),arguments)}function __wbg_includes_e846113095d52470(e,_,t){return getObject(e).includes(getObject(_),t)}function __wbg_of_053899a68de3ef48(e){return addHeapObject(Array.of(getObject(e)))}function __wbg_push_ca1c26067ef907ac(e,_){return getObject(e).push(getObject(_))}function __wbg_is_205d914af04a8faa(e,_){return Object.is(getObject(e),getObject(_))}function __wbg_buffer_085ec1f694018c4f(e){return addHeapObject(getObject(e).buffer)}function __wbg_newwithbyteoffsetandlength_828b952f0e692245(e,_,t){return addHeapObject(new Int8Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_735ed5ea2ae07fe9(e,_,t){return addHeapObject(new Int16Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_9f43b22ab631d1d6(e,_,t){return addHeapObject(new Int32Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_6da8e527659b86aa(e,_,t){return addHeapObject(new Uint8Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_31ff1024ef0c63c7(e,_,t){return addHeapObject(new Uint16Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_6df0e8c3efd2a5d3(e,_,t){return addHeapObject(new Uint32Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_69193e31c844b792(e,_,t){return addHeapObject(new Float32Array(getObject(e),_>>>0,t>>>0))}function __wbg_set_092e06b0f9d71865(){return handleError((function(e,_,t){return Reflect.set(getObject(e),getObject(_),getObject(t))}),arguments)}function __wbindgen_debug_string(e,_){const t=passStringToWasm0(debugString(getObject(_)),wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbindgen_throw(e,_){throw new Error(getStringFromWasm0(e,_))}function __wbindgen_memory(){return addHeapObject(wasm.memory)}function __wbindgen_closure_wrapper477(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper479(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper481(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper483(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper485(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper487(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_37))}function __wbindgen_closure_wrapper489(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper491(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper493(e,_,t){return addHeapObject(makeMutClosure(e,_,55,__wbg_adapter_26))}function __wbindgen_closure_wrapper960(e,_,t){return addHeapObject(makeMutClosure(e,_,317,__wbg_adapter_46))}function __wbindgen_closure_wrapper5083(e,_,t){return addHeapObject(makeMutClosure(e,_,1821,__wbg_adapter_49))}}).call(this,__webpack_require__(262)(module))},257:function(e,_,t){"use strict";var r,n,c,b=t(264),a=t(4),u=t(1),f=t(0),o=t(9),d=t(8),i=t(92),g=t(95),w=t(12),p=t(96),s=t(259),l=t(48),k=t(265),m=t(50),x=t(28),O=t(49),j=t(98),y=j.enforce,h=j.get,q=u.Int8Array,S=q&&q.prototype,E=u.Uint8ClampedArray,v=E&&E.prototype,A=q&&k(q),M=S&&k(S),T=Object.prototype,I=u.TypeError,P=x("toStringTag"),D=O("TYPED_ARRAY_TAG"),F=b&&!!m&&"Opera"!==i(u.opera),L=!1,B={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},W={BigInt64Array:8,BigUint64Array:8},R=function(e){var _=k(e);if(o(_)){var t=h(_);return t&&d(t,"TypedArrayConstructor")?t.TypedArrayConstructor:R(_)}},C=function(e){if(!o(e))return!1;var _=i(e);return d(B,_)||d(W,_)};for(r in B)(c=(n=u[r])&&n.prototype)?y(c).TypedArrayConstructor=n:F=!1;for(r in W)(c=(n=u[r])&&n.prototype)&&(y(c).TypedArrayConstructor=n);if((!F||!f(A)||A===Function.prototype)&&(A=function(){throw new I("Incorrect invocation")},F))for(r in B)u[r]&&m(u[r],A);if((!F||!M||M===T)&&(M=A.prototype,F))for(r in B)u[r]&&m(u[r].prototype,M);if(F&&k(v)!==M&&m(v,M),a&&!d(M,P))for(r in L=!0,s(M,P,{configurable:!0,get:function(){return o(this)?this[D]:void 0}}),B)u[r]&&w(u[r],D,r);e.exports={NATIVE_ARRAY_BUFFER_VIEWS:F,TYPED_ARRAY_TAG:L&&D,aTypedArray:function(e){if(C(e))return e;throw new I("Target is not a typed array")},aTypedArrayConstructor:function(e){if(f(e)&&(!m||l(A,e)))return e;throw new I(g(e)+" is not a typed array constructor")},exportTypedArrayMethod:function(e,_,t,r){if(a){if(t)for(var n in B){var c=u[n];if(c&&d(c.prototype,e))try{delete c.prototype[e]}catch(t){try{c.prototype[e]=_}catch(e){}}}M[e]&&!t||p(M,e,t?_:F&&S[e]||_,r)}},exportTypedArrayStaticMethod:function(e,_,t){var r,n;if(a){if(m){if(t)for(r in B)if((n=u[r])&&d(n,e))try{delete n[e]}catch(e){}if(A[e]&&!t)return;try{return p(A,e,t?_:F&&A[e]||_)}catch(e){}}for(r in B)!(n=u[r])||n[e]&&!t||p(n,e,_)}},getTypedArrayConstructor:R,isView:function(e){if(!o(e))return!1;var _=i(e);return"DataView"===_||d(B,_)||d(W,_)},isTypedArray:C,TypedArray:A,TypedArrayPrototype:M}},259:function(e,_,t){"use strict";var r=t(97),n=t(15);e.exports=function(e,_,t){return t.get&&r(t.get,_,{getter:!0}),t.set&&r(t.set,_,{setter:!0}),n.f(e,_,t)}},260:function(e,_,t){"use strict";var r=t(268),n=t(47),c=t(25),b=t(24),a=function(e){var _=1===e;return function(t,a,u){for(var f,o=c(t),d=n(o),i=b(d),g=r(a,u);i-- >0;)if(g(f=d[i],i,o))switch(e){case 0:return f;case 1:return i}return _?-1:void 0}};e.exports={findLast:a(0),findLastIndex:a(1)}},262:function(e,_){e.exports=function(e){if(!e.webpackPolyfill){var _=Object.create(e);_.children||(_.children=[]),Object.defineProperty(_,"loaded",{enumerable:!0,get:function(){return _.l}}),Object.defineProperty(_,"id",{enumerable:!0,get:function(){return _.i}}),Object.defineProperty(_,"exports",{enumerable:!0}),_.webpackPolyfill=1}return _}},263:function(e,_,t){"use strict";var r=t(257),n=t(24),c=t(46),b=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(e){var _=b(this),t=n(_),r=c(e),a=r>=0?r:t+r;return a<0||a>=t?void 0:_[a]}))},264:function(e,_,t){"use strict";e.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(e,_,t){"use strict";var r=t(8),n=t(0),c=t(25),b=t(99),a=t(266),u=b("IE_PROTO"),f=Object,o=f.prototype;e.exports=a?f.getPrototypeOf:function(e){var _=c(e);if(r(_,u))return _[u];var t=_.constructor;return n(t)&&_ instanceof t?t.prototype:_ instanceof f?o:null}},266:function(e,_,t){"use strict";var r=t(2);e.exports=!r((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}))},267:function(e,_,t){"use strict";var r=t(257),n=t(260).findLast,c=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(e){return n(c(this),e,arguments.length>1?arguments[1]:void 0)}))},268:function(e,_,t){"use strict";var r=t(269),n=t(27),c=t(30),b=r(r.bind);e.exports=function(e,_){return n(e),void 0===_?e:c?b(e,_):function(){return e.apply(_,arguments)}}},269:function(e,_,t){"use strict";var r=t(16),n=t(3);e.exports=function(e){if("Function"===r(e))return n(e)}},270:function(e,_,t){"use strict";var r=t(257),n=t(260).findLastIndex,c=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(e){return n(c(this),e,arguments.length>1?arguments[1]:void 0)}))},271:function(e,_,t){"use strict";var r=t(1),n=t(29),c=t(257),b=t(24),a=t(272),u=t(25),f=t(2),o=r.RangeError,d=r.Int8Array,i=d&&d.prototype,g=i&&i.set,w=c.aTypedArray,p=c.exportTypedArrayMethod,s=!f((function(){var e=new Uint8ClampedArray(2);return n(g,e,{length:1,0:3},1),3!==e[1]})),l=s&&c.NATIVE_ARRAY_BUFFER_VIEWS&&f((function(){var e=new d(2);return e.set(1),e.set("2",1),0!==e[0]||2!==e[1]}));p("set",(function(e){w(this);var _=a(arguments.length>1?arguments[1]:void 0,1),t=u(e);if(s)return n(g,this,t,_);var r=this.length,c=b(t),f=0;if(c+_>r)throw new o("Wrong length");for(;f2?t:r(_),b=new e(c);c>n;)b[n]=_[n++];return b}},278:function(e,_,t){"use strict";var r=t(279),n=t(257),c=t(280),b=t(46),a=t(281),u=n.aTypedArray,f=n.getTypedArrayConstructor,o=n.exportTypedArrayMethod,d=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(e){return 8===e}}();o("with",{with:function(e,_){var t=u(this),n=b(e),o=c(t)?a(_):+_;return r(t,f(t),n,o)}}.with,!d)},279:function(e,_,t){"use strict";var r=t(24),n=t(46),c=RangeError;e.exports=function(e,_,t,b){var a=r(e),u=n(t),f=u<0?a+u:u;if(f>=a||f<0)throw new c("Incorrect index");for(var o=new _(a),d=0;d>>=0,cachedTextDecoder.decode(getUint8Memory0().subarray(e,e+_))}let WASM_VECTOR_LEN=0;const lTextEncoder="undefined"==typeof TextEncoder?(0,module.require)("util").TextEncoder:TextEncoder;let cachedTextEncoder=new lTextEncoder("utf-8");const encodeString="function"==typeof cachedTextEncoder.encodeInto?function(e,_){return cachedTextEncoder.encodeInto(e,_)}:function(e,_){const t=cachedTextEncoder.encode(e);return _.set(t),{read:e.length,written:t.length}};function passStringToWasm0(e,_,t){if(void 0===t){const t=cachedTextEncoder.encode(e),r=_(t.length,1)>>>0;return getUint8Memory0().subarray(r,r+t.length).set(t),WASM_VECTOR_LEN=t.length,r}let r=e.length,n=_(r,1)>>>0;const c=getUint8Memory0();let b=0;for(;b127)break;c[n+b]=_}if(b!==r){0!==b&&(e=e.slice(b)),n=t(n,r,r=b+3*e.length,1)>>>0;const _=getUint8Memory0().subarray(n+b,n+r);b+=encodeString(e,_).written}return WASM_VECTOR_LEN=b,n}function isLikeNone(e){return null==e}let cachedInt32Memory0=null;function getInt32Memory0(){return null!==cachedInt32Memory0&&0!==cachedInt32Memory0.byteLength||(cachedInt32Memory0=new Int32Array(wasm.memory.buffer)),cachedInt32Memory0}let cachedFloat64Memory0=null;function getFloat64Memory0(){return null!==cachedFloat64Memory0&&0!==cachedFloat64Memory0.byteLength||(cachedFloat64Memory0=new Float64Array(wasm.memory.buffer)),cachedFloat64Memory0}function debugString(e){const _=typeof e;if("number"==_||"boolean"==_||null==e)return""+e;if("string"==_)return`"${e}"`;if("symbol"==_){const _=e.description;return null==_?"Symbol":`Symbol(${_})`}if("function"==_){const _=e.name;return"string"==typeof _&&_.length>0?`Function(${_})`:"Function"}if(Array.isArray(e)){const _=e.length;let t="[";_>0&&(t+=debugString(e[0]));for(let r=1;r<_;r++)t+=", "+debugString(e[r]);return t+="]",t}const t=/\[object ([^\]]+)\]/.exec(toString.call(e));let r;if(!(t.length>1))return toString.call(e);if(r=t[1],"Object"==r)try{return"Object("+JSON.stringify(e)+")"}catch(e){return"Object"}return e instanceof Error?`${e.name}: ${e.message}\n${e.stack}`:r}function makeMutClosure(e,_,t,r){const n={a:e,b:_,cnt:1,dtor:t},c=(...e)=>{n.cnt++;const _=n.a;n.a=0;try{return r(_,n.b,...e)}finally{0==--n.cnt?wasm.__wbindgen_export_2.get(n.dtor)(_,n.b):n.a=_}};return c.original=n,c}function __wbg_adapter_26(e,_,t){wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h20e25cd87979cc22(e,_,addHeapObject(t))}function __wbg_adapter_31(e,_){wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h935619a770d37565(e,_)}function __wbg_adapter_46(e,_){wasm.wasm_bindgen__convert__closures__invoke0_mut__hd290bff2d2c322ad(e,_)}function __wbg_adapter_49(e,_,t){wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(e,_,addHeapObject(t))}function start(){wasm.start()}let cachedFloat32Memory0=null;function getFloat32Memory0(){return null!==cachedFloat32Memory0&&0!==cachedFloat32Memory0.byteLength||(cachedFloat32Memory0=new Float32Array(wasm.memory.buffer)),cachedFloat32Memory0}function getArrayF32FromWasm0(e,_){return e>>>=0,getFloat32Memory0().subarray(e/4,e/4+_)}function getArrayI32FromWasm0(e,_){return e>>>=0,getInt32Memory0().subarray(e/4,e/4+_)}let cachedUint32Memory0=null;function getUint32Memory0(){return null!==cachedUint32Memory0&&0!==cachedUint32Memory0.byteLength||(cachedUint32Memory0=new Uint32Array(wasm.memory.buffer)),cachedUint32Memory0}function getArrayU32FromWasm0(e,_){return e>>>=0,getUint32Memory0().subarray(e/4,e/4+_)}function handleError(e,_){try{return e.apply(this,_)}catch(e){wasm.__wbindgen_exn_store(addHeapObject(e))}}function __wbindgen_cb_drop(e){const _=takeObject(e).original;if(1==_.cnt--)return _.a=0,!0;return!1}function __wbindgen_object_drop_ref(e){takeObject(e)}function __wbindgen_object_clone_ref(e){return addHeapObject(getObject(e))}function __wbindgen_string_new(e,_){return addHeapObject(getStringFromWasm0(e,_))}function __wbg_new_abda76e883ba8a5f(){return addHeapObject(new Error)}function __wbg_stack_658279fe44541cf6(e,_){const t=passStringToWasm0(getObject(_).stack,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_error_f851667af71bcfc6(e,_){let t,r;try{t=e,r=_,console.error(getStringFromWasm0(e,_))}finally{wasm.__wbindgen_free(t,r,1)}}function __wbindgen_boolean_get(e){const _=getObject(e);return"boolean"==typeof _?_?1:0:2}function __wbindgen_string_get(e,_){const t=getObject(_),r="string"==typeof t?t:void 0;var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbindgen_number_get(e,_){const t=getObject(_),r="number"==typeof t?t:void 0;getFloat64Memory0()[e/8+1]=isLikeNone(r)?0:r,getInt32Memory0()[e/4+0]=!isLikeNone(r)}function __wbindgen_number_new(e){return addHeapObject(e)}function __wbg_instanceof_WebGl2RenderingContext_f921526c513bf717(e){let _;try{_=getObject(e)instanceof WebGL2RenderingContext}catch{_=!1}return _}function __wbg_beginQuery_d338463adf721553(e,_,t){getObject(e).beginQuery(_>>>0,getObject(t))}function __wbg_bindBufferRange_d8a5ebc8ea8be507(e,_,t,r,n,c){getObject(e).bindBufferRange(_>>>0,t>>>0,getObject(r),n,c)}function __wbg_bindSampler_d74e398b68cf5980(e,_,t){getObject(e).bindSampler(_>>>0,getObject(t))}function __wbg_bindVertexArray_8863a216d7b0a339(e,_){getObject(e).bindVertexArray(getObject(_))}function __wbg_blitFramebuffer_e6642748dd06d47e(e,_,t,r,n,c,b,a,u,f,o){getObject(e).blitFramebuffer(_,t,r,n,c,b,a,u,f>>>0,o>>>0)}function __wbg_bufferData_496bbb31639d9850(e,_,t,r){getObject(e).bufferData(_>>>0,t,r>>>0)}function __wbg_bufferData_21334671c4ba6004(e,_,t,r){getObject(e).bufferData(_>>>0,getObject(t),r>>>0)}function __wbg_bufferSubData_c472b93c9e272eac(e,_,t,r){getObject(e).bufferSubData(_>>>0,t,getObject(r))}function __wbg_clearBufferfi_25bcd35b825f629d(e,_,t,r,n){getObject(e).clearBufferfi(_>>>0,t,r,n)}function __wbg_clearBufferfv_9de0cb45cc5a012b(e,_,t,r,n){getObject(e).clearBufferfv(_>>>0,t,getArrayF32FromWasm0(r,n))}function __wbg_clearBufferiv_fc2f8bce2930c586(e,_,t,r,n){getObject(e).clearBufferiv(_>>>0,t,getArrayI32FromWasm0(r,n))}function __wbg_clearBufferuiv_2f6d220a31eabca4(e,_,t,r,n){getObject(e).clearBufferuiv(_>>>0,t,getArrayU32FromWasm0(r,n))}function __wbg_clientWaitSync_6a74725ec890efdd(e,_,t,r){return getObject(e).clientWaitSync(getObject(_),t>>>0,r>>>0)}function __wbg_compressedTexSubImage2D_945ba54869f3a612(e,_,t,r,n,c,b,a,u,f){getObject(e).compressedTexSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u,f)}function __wbg_compressedTexSubImage2D_ed56fa2f82a839b1(e,_,t,r,n,c,b,a,u){getObject(e).compressedTexSubImage2D(_>>>0,t,r,n,c,b,a>>>0,getObject(u))}function __wbg_compressedTexSubImage3D_4cebeae1440fdc14(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).compressedTexSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o,d)}function __wbg_compressedTexSubImage3D_0ae61aaa91089745(e,_,t,r,n,c,b,a,u,f,o){getObject(e).compressedTexSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,getObject(o))}function __wbg_copyBufferSubData_d112912c90270156(e,_,t,r,n,c){getObject(e).copyBufferSubData(_>>>0,t>>>0,r,n,c)}function __wbg_copyTexSubImage3D_9fa5e9e7b16cf09d(e,_,t,r,n,c,b,a,u,f){getObject(e).copyTexSubImage3D(_>>>0,t,r,n,c,b,a,u,f)}function __wbg_createQuery_2ef2dc0f01a4a8e3(e){const _=getObject(e).createQuery();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createSampler_039ecd204675292b(e){const _=getObject(e).createSampler();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createVertexArray_51d51e1e1e13e9f6(e){const _=getObject(e).createVertexArray();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_deleteQuery_0c64c5200cdc57a6(e,_){getObject(e).deleteQuery(getObject(_))}function __wbg_deleteSampler_ce5b8e120f96fc1a(e,_){getObject(e).deleteSampler(getObject(_))}function __wbg_deleteSync_1b05dfcc176e7466(e,_){getObject(e).deleteSync(getObject(_))}function __wbg_deleteVertexArray_3e4f2e2ff7f05a19(e,_){getObject(e).deleteVertexArray(getObject(_))}function __wbg_drawArraysInstanced_8fb13fe9faf95212(e,_,t,r,n){getObject(e).drawArraysInstanced(_>>>0,t,r,n)}function __wbg_drawBuffers_15d26e17a8d24ee0(e,_){getObject(e).drawBuffers(getObject(_))}function __wbg_drawElementsInstanced_dcf53461a977d44c(e,_,t,r,n,c){getObject(e).drawElementsInstanced(_>>>0,t,r>>>0,n,c)}function __wbg_endQuery_faf7eb231d6f2a66(e,_){getObject(e).endQuery(_>>>0)}function __wbg_fenceSync_d68dcbdcdd134d92(e,_,t){const r=getObject(e).fenceSync(_>>>0,t>>>0);return isLikeNone(r)?0:addHeapObject(r)}function __wbg_framebufferTextureLayer_a92788e5f0409234(e,_,t,r,n,c){getObject(e).framebufferTextureLayer(_>>>0,t>>>0,getObject(r),n,c)}function __wbg_getBufferSubData_8710cc73621fc332(e,_,t,r){getObject(e).getBufferSubData(_>>>0,t,getObject(r))}function __wbg_getIndexedParameter_4f004dc25c3d15a9(){return handleError((function(e,_,t){return addHeapObject(getObject(e).getIndexedParameter(_>>>0,t>>>0))}),arguments)}function __wbg_getSyncParameter_d93ec7f6bb11274c(e,_,t){return addHeapObject(getObject(e).getSyncParameter(getObject(_),t>>>0))}function __wbg_getUniformBlockIndex_99c15053c9a87c73(e,_,t,r){return getObject(e).getUniformBlockIndex(getObject(_),getStringFromWasm0(t,r))}function __wbg_invalidateFramebuffer_03bd99588b15d627(){return handleError((function(e,_,t){getObject(e).invalidateFramebuffer(_>>>0,getObject(t))}),arguments)}function __wbg_readBuffer_c426fe18344296ff(e,_){getObject(e).readBuffer(_>>>0)}function __wbg_readPixels_99fda83f6ca7ec72(){return handleError((function(e,_,t,r,n,c,b,a){getObject(e).readPixels(_,t,r,n,c>>>0,b>>>0,getObject(a))}),arguments)}function __wbg_readPixels_9634f0dcfb54667c(){return handleError((function(e,_,t,r,n,c,b,a){getObject(e).readPixels(_,t,r,n,c>>>0,b>>>0,a)}),arguments)}function __wbg_renderbufferStorageMultisample_9260e2e620c949e5(e,_,t,r,n,c){getObject(e).renderbufferStorageMultisample(_>>>0,t,r>>>0,n,c)}function __wbg_samplerParameterf_1c7562ef061b803b(e,_,t,r){getObject(e).samplerParameterf(getObject(_),t>>>0,r)}function __wbg_samplerParameteri_0fee083bc48e70ee(e,_,t,r){getObject(e).samplerParameteri(getObject(_),t>>>0,r)}function __wbg_texStorage2D_6665d01025a7e7fc(e,_,t,r,n,c){getObject(e).texStorage2D(_>>>0,t,r>>>0,n,c)}function __wbg_texStorage3D_c01c31c1b02d75fd(e,_,t,r,n,c,b){getObject(e).texStorage3D(_>>>0,t,r>>>0,n,c,b)}function __wbg_texSubImage2D_d2841ded12a8aa66(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage2D_bccf4e250f1ce1b8(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,f)}),arguments)}function __wbg_texSubImage2D_780a7c889dc20a98(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage2D_b5bb36f2f54b4264(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage2D_a297114050ea1098(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_texSubImage3D_43f39a73ed02fae3(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,d)}),arguments)}function __wbg_texSubImage3D_ffdccca1422b482a(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_texSubImage3D_69d5e09d45e0251c(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_texSubImage3D_ae3ed5d0154c346c(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_texSubImage3D_80693fc2c7855e4d(){return handleError((function(e,_,t,r,n,c,b,a,u,f,o,d){getObject(e).texSubImage3D(_>>>0,t,r,n,c,b,a,u,f>>>0,o>>>0,getObject(d))}),arguments)}function __wbg_uniform2fv_2b473f6dce24c898(e,_,t,r){getObject(e).uniform2fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform2iv_fdaa3cd258d3451e(e,_,t,r){getObject(e).uniform2iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform3fv_3e55033ca16ec6ab(e,_,t,r){getObject(e).uniform3fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform3iv_3d3ed90c76e6777e(e,_,t,r){getObject(e).uniform3iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform4fv_26ec0c9d7bf6d7c6(e,_,t,r){getObject(e).uniform4fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform4iv_2be6b77c47b90d81(e,_,t,r){getObject(e).uniform4iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniformBlockBinding_0dc4bd81bb4ccb6a(e,_,t,r){getObject(e).uniformBlockBinding(getObject(_),t>>>0,r>>>0)}function __wbg_uniformMatrix2fv_1ab7aeb8562ea3dd(e,_,t,r,n){getObject(e).uniformMatrix2fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix3fv_0b151be4d76ee66b(e,_,t,r,n){getObject(e).uniformMatrix3fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix4fv_766b5ba343983038(e,_,t,r,n){getObject(e).uniformMatrix4fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_vertexAttribDivisor_197e2e23e3fbde7f(e,_,t){getObject(e).vertexAttribDivisor(_>>>0,t>>>0)}function __wbg_vertexAttribIPointer_6f8540e358f8a547(e,_,t,r,n,c){getObject(e).vertexAttribIPointer(_>>>0,t,r>>>0,n,c)}function __wbg_activeTexture_799bf1387e911c27(e,_){getObject(e).activeTexture(_>>>0)}function __wbg_attachShader_47256b6b3d42a22e(e,_,t){getObject(e).attachShader(getObject(_),getObject(t))}function __wbg_bindBuffer_24f6010e273fa400(e,_,t){getObject(e).bindBuffer(_>>>0,getObject(t))}function __wbg_bindFramebuffer_a9573e340dab20fe(e,_,t){getObject(e).bindFramebuffer(_>>>0,getObject(t))}function __wbg_bindRenderbuffer_54c404711f9b6958(e,_,t){getObject(e).bindRenderbuffer(_>>>0,getObject(t))}function __wbg_bindTexture_92d6d7f8bff9531e(e,_,t){getObject(e).bindTexture(_>>>0,getObject(t))}function __wbg_blendColor_7974f09cb60d2be0(e,_,t,r,n){getObject(e).blendColor(_,t,r,n)}function __wbg_blendEquation_12146cb96dc1bcd9(e,_){getObject(e).blendEquation(_>>>0)}function __wbg_blendEquationSeparate_205526dad772d160(e,_,t){getObject(e).blendEquationSeparate(_>>>0,t>>>0)}function __wbg_blendFunc_533de6de45b80a09(e,_,t){getObject(e).blendFunc(_>>>0,t>>>0)}function __wbg_blendFuncSeparate_fbf93dee3e5ce456(e,_,t,r,n){getObject(e).blendFuncSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_colorMask_fba1e2efd891e2ac(e,_,t,r,n){getObject(e).colorMask(0!==_,0!==t,0!==r,0!==n)}function __wbg_compileShader_6bf78b425d5c98e1(e,_){getObject(e).compileShader(getObject(_))}function __wbg_copyTexSubImage2D_26685100d5f2b4c0(e,_,t,r,n,c,b,a,u){getObject(e).copyTexSubImage2D(_>>>0,t,r,n,c,b,a,u)}function __wbg_createBuffer_323425af422748ac(e){const _=getObject(e).createBuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createFramebuffer_1684a99697ac9563(e){const _=getObject(e).createFramebuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createProgram_4eaf3b97b5747a62(e){const _=getObject(e).createProgram();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createRenderbuffer_3e6dd356d7897ed7(e){const _=getObject(e).createRenderbuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createShader_429776c9dd6fb87b(e,_){const t=getObject(e).createShader(_>>>0);return isLikeNone(t)?0:addHeapObject(t)}function __wbg_createTexture_1bf4d6fec570124b(e){const _=getObject(e).createTexture();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_cullFace_6daa9f2aa42b4620(e,_){getObject(e).cullFace(_>>>0)}function __wbg_deleteBuffer_2c09d03fa4b0bd08(e,_){getObject(e).deleteBuffer(getObject(_))}function __wbg_deleteFramebuffer_edd16bb8df6a8e0d(e,_){getObject(e).deleteFramebuffer(getObject(_))}function __wbg_deleteProgram_53a32852f245b839(e,_){getObject(e).deleteProgram(getObject(_))}function __wbg_deleteRenderbuffer_134040051fcc1ba5(e,_){getObject(e).deleteRenderbuffer(getObject(_))}function __wbg_deleteShader_7c1222349324b5e2(e,_){getObject(e).deleteShader(getObject(_))}function __wbg_deleteTexture_4fcfea73cd8f6214(e,_){getObject(e).deleteTexture(getObject(_))}function __wbg_depthFunc_fb41ad353d07948d(e,_){getObject(e).depthFunc(_>>>0)}function __wbg_depthMask_6a4ff02cd2a2702e(e,_){getObject(e).depthMask(0!==_)}function __wbg_depthRange_a5647a9040aec55b(e,_,t){getObject(e).depthRange(_,t)}function __wbg_disable_e02106ca6c7002d6(e,_){getObject(e).disable(_>>>0)}function __wbg_disableVertexAttribArray_6d57776c8f642f44(e,_){getObject(e).disableVertexAttribArray(_>>>0)}function __wbg_drawArrays_c91ce3f736bf1f2a(e,_,t,r){getObject(e).drawArrays(_>>>0,t,r)}function __wbg_enable_195891416c520019(e,_){getObject(e).enable(_>>>0)}function __wbg_enableVertexAttribArray_8804480c2ea0bb72(e,_){getObject(e).enableVertexAttribArray(_>>>0)}function __wbg_framebufferRenderbuffer_3ec0983918c2b69d(e,_,t,r,n){getObject(e).framebufferRenderbuffer(_>>>0,t>>>0,r>>>0,getObject(n))}function __wbg_framebufferTexture2D_e88fcbd7f8523bb8(e,_,t,r,n,c){getObject(e).framebufferTexture2D(_>>>0,t>>>0,r>>>0,getObject(n),c)}function __wbg_frontFace_786a036f1d643925(e,_){getObject(e).frontFace(_>>>0)}function __wbg_getActiveUniform_78367ddc7339640b(e,_,t){const r=getObject(e).getActiveUniform(getObject(_),t>>>0);return isLikeNone(r)?0:addHeapObject(r)}function __wbg_getExtension_77909f6d51d49d4d(){return handleError((function(e,_,t){const r=getObject(e).getExtension(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}),arguments)}function __wbg_getParameter_55b36a787dbbfb74(){return handleError((function(e,_){return addHeapObject(getObject(e).getParameter(_>>>0))}),arguments)}function __wbg_getProgramInfoLog_b81bc53188e286fa(e,_,t){const r=getObject(_).getProgramInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getProgramParameter_35522a0bfdfaad27(e,_,t){return addHeapObject(getObject(e).getProgramParameter(getObject(_),t>>>0))}function __wbg_getShaderInfoLog_968b93e75477d725(e,_,t){const r=getObject(_).getShaderInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getShaderParameter_ac2727ae4fe7648e(e,_,t){return addHeapObject(getObject(e).getShaderParameter(getObject(_),t>>>0))}function __wbg_getSupportedExtensions_fafc31aab913037d(e){const _=getObject(e).getSupportedExtensions();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_getUniformLocation_9f6eb60c560a347b(e,_,t,r){const n=getObject(e).getUniformLocation(getObject(_),getStringFromWasm0(t,r));return isLikeNone(n)?0:addHeapObject(n)}function __wbg_linkProgram_33998194075d71fb(e,_){getObject(e).linkProgram(getObject(_))}function __wbg_pixelStorei_f3a24990aa352fc7(e,_,t){getObject(e).pixelStorei(_>>>0,t)}function __wbg_polygonOffset_faca8e73770272ff(e,_,t){getObject(e).polygonOffset(_,t)}function __wbg_renderbufferStorage_987d1af7c9faf5dd(e,_,t,r,n){getObject(e).renderbufferStorage(_>>>0,t>>>0,r,n)}function __wbg_scissor_e8e41e1c0a9817c8(e,_,t,r,n){getObject(e).scissor(_,t,r,n)}function __wbg_shaderSource_1cb7c64dc7d1a500(e,_,t,r){getObject(e).shaderSource(getObject(_),getStringFromWasm0(t,r))}function __wbg_stencilFuncSeparate_8ff94e24a50a3c45(e,_,t,r,n){getObject(e).stencilFuncSeparate(_>>>0,t>>>0,r,n>>>0)}function __wbg_stencilMask_641f92999dd3c3de(e,_){getObject(e).stencilMask(_>>>0)}function __wbg_stencilMaskSeparate_6b2c8ef22fb3b6d1(e,_,t){getObject(e).stencilMaskSeparate(_>>>0,t>>>0)}function __wbg_stencilOpSeparate_38925591af8feb44(e,_,t,r,n){getObject(e).stencilOpSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_texParameteri_85dad939f62a15aa(e,_,t,r){getObject(e).texParameteri(_>>>0,t>>>0,r)}function __wbg_uniform1f_88379f4e2630bc66(e,_,t){getObject(e).uniform1f(getObject(_),t)}function __wbg_uniform1i_d2e61a6a43889648(e,_,t){getObject(e).uniform1i(getObject(_),t)}function __wbg_uniform4f_a9fd337d4b07f595(e,_,t,r,n,c){getObject(e).uniform4f(getObject(_),t,r,n,c)}function __wbg_useProgram_3683cf6f60939dcd(e,_){getObject(e).useProgram(getObject(_))}function __wbg_vertexAttribPointer_316ffe2f0458fde7(e,_,t,r,n,c,b){getObject(e).vertexAttribPointer(_>>>0,t,r>>>0,0!==n,c,b)}function __wbg_viewport_fad1ce9e18f741c0(e,_,t,r,n){getObject(e).viewport(_,t,r,n)}function __wbg_getBoundingClientRect_ac9db8cf97ca8083(e){return addHeapObject(getObject(e).getBoundingClientRect())}function __wbg_requestFullscreen_3545278bcd44910c(){return handleError((function(e){getObject(e).requestFullscreen()}),arguments)}function __wbg_setAttribute_e7e80b478b7b8b2f(){return handleError((function(e,_,t,r,n){getObject(e).setAttribute(getStringFromWasm0(_,t),getStringFromWasm0(r,n))}),arguments)}function __wbg_setPointerCapture_e7c29336490bba19(){return handleError((function(e,_){getObject(e).setPointerCapture(_)}),arguments)}function __wbg_instanceof_Window_9029196b662bc42a(e){let _;try{_=getObject(e)instanceof Window}catch{_=!1}return _}function __wbg_document_f7ace2b956f30a4f(e){const _=getObject(e).document;return isLikeNone(_)?0:addHeapObject(_)}function __wbg_innerWidth_ebe07ce5463ff293(){return handleError((function(e){return addHeapObject(getObject(e).innerWidth)}),arguments)}function __wbg_innerHeight_2dd06d8cf68f1d7d(){return handleError((function(e){return addHeapObject(getObject(e).innerHeight)}),arguments)}function __wbg_devicePixelRatio_f9de7bddca0eaf20(e){return getObject(e).devicePixelRatio}function __wbg_matchMedia_12ef69056e32d0b3(){return handleError((function(e,_,t){const r=getObject(e).matchMedia(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}),arguments)}function __wbg_get_cb7c1c2da725c920(e,_,t){const r=getObject(e)[getStringFromWasm0(_,t)];return isLikeNone(r)?0:addHeapObject(r)}function __wbg_cancelAnimationFrame_9b68e9588c6543bc(){return handleError((function(e,_){getObject(e).cancelAnimationFrame(_)}),arguments)}function __wbg_requestAnimationFrame_d082200514b6674d(){return handleError((function(e,_){return getObject(e).requestAnimationFrame(getObject(_))}),arguments)}function __wbg_clearTimeout_220be2fa0577b342(e,_){getObject(e).clearTimeout(_)}function __wbg_setTimeout_eb1a0d116c26d9f6(){return handleError((function(e,_,t){return getObject(e).setTimeout(getObject(_),t)}),arguments)}function __wbg_fullscreenElement_07d5b77ef6c958c1(e){const _=getObject(e).fullscreenElement;return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createElement_4891554b28d3388b(){return handleError((function(e,_,t){return addHeapObject(getObject(e).createElement(getStringFromWasm0(_,t)))}),arguments)}function __wbg_getElementById_cc0e0d931b0d9a28(e,_,t){const r=getObject(e).getElementById(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}function __wbg_querySelector_52ded52c20e23921(){return handleError((function(e,_,t){const r=getObject(e).querySelector(getStringFromWasm0(_,t));return isLikeNone(r)?0:addHeapObject(r)}),arguments)}function __wbg_style_3801009b2339aa94(e){return addHeapObject(getObject(e).style)}function __wbg_bufferData_92a3e0b745b0d726(e,_,t,r){getObject(e).bufferData(_>>>0,t,r>>>0)}function __wbg_bufferData_a11a9f65f31e7256(e,_,t,r){getObject(e).bufferData(_>>>0,getObject(t),r>>>0)}function __wbg_bufferSubData_fca6f1c10273be21(e,_,t,r){getObject(e).bufferSubData(_>>>0,t,getObject(r))}function __wbg_compressedTexSubImage2D_21078c6de0a71aad(e,_,t,r,n,c,b,a,u){getObject(e).compressedTexSubImage2D(_>>>0,t,r,n,c,b,a>>>0,getObject(u))}function __wbg_readPixels_91b0d8854de90477(){return handleError((function(e,_,t,r,n,c,b,a){getObject(e).readPixels(_,t,r,n,c>>>0,b>>>0,getObject(a))}),arguments)}function __wbg_texSubImage2D_f1a31f8045b7f831(){return handleError((function(e,_,t,r,n,c,b,a,u,f){getObject(e).texSubImage2D(_>>>0,t,r,n,c,b,a>>>0,u>>>0,getObject(f))}),arguments)}function __wbg_uniform2fv_c928f6ba0085b381(e,_,t,r){getObject(e).uniform2fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform2iv_7e5f8e7c2f4d4d6a(e,_,t,r){getObject(e).uniform2iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform3fv_1aba437b913c1926(e,_,t,r){getObject(e).uniform3fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform3iv_23751fe4dfcdf539(e,_,t,r){getObject(e).uniform3iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniform4fv_7c51c2251d851cb2(e,_,t,r){getObject(e).uniform4fv(getObject(_),getArrayF32FromWasm0(t,r))}function __wbg_uniform4iv_27b49984e9c5d90a(e,_,t,r){getObject(e).uniform4iv(getObject(_),getArrayI32FromWasm0(t,r))}function __wbg_uniformMatrix2fv_f8f3ef807f196bf1(e,_,t,r,n){getObject(e).uniformMatrix2fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix3fv_341eec37953e50c5(e,_,t,r,n){getObject(e).uniformMatrix3fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_uniformMatrix4fv_465ab8de531f4f78(e,_,t,r,n){getObject(e).uniformMatrix4fv(getObject(_),0!==t,getArrayF32FromWasm0(r,n))}function __wbg_activeTexture_93b4de60af07da9c(e,_){getObject(e).activeTexture(_>>>0)}function __wbg_attachShader_b65b695055670cb5(e,_,t){getObject(e).attachShader(getObject(_),getObject(t))}function __wbg_bindBuffer_313561e5bc0e533f(e,_,t){getObject(e).bindBuffer(_>>>0,getObject(t))}function __wbg_bindFramebuffer_56bf6536a4ced0ec(e,_,t){getObject(e).bindFramebuffer(_>>>0,getObject(t))}function __wbg_bindRenderbuffer_559c7c6b6676dddd(e,_,t){getObject(e).bindRenderbuffer(_>>>0,getObject(t))}function __wbg_bindTexture_9cb5c770d1ba2cca(e,_,t){getObject(e).bindTexture(_>>>0,getObject(t))}function __wbg_blendColor_b9006ef6c450acd0(e,_,t,r,n){getObject(e).blendColor(_,t,r,n)}function __wbg_blendEquation_f31ce08020786a09(e,_){getObject(e).blendEquation(_>>>0)}function __wbg_blendEquationSeparate_7ec5e34f066e44f8(e,_,t){getObject(e).blendEquationSeparate(_>>>0,t>>>0)}function __wbg_blendFunc_fbe9d3a688fe71c3(e,_,t){getObject(e).blendFunc(_>>>0,t>>>0)}function __wbg_blendFuncSeparate_7547ade0a7dfade2(e,_,t,r,n){getObject(e).blendFuncSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_colorMask_7cbd7a102954ede9(e,_,t,r,n){getObject(e).colorMask(0!==_,0!==t,0!==r,0!==n)}function __wbg_compileShader_d88d0a8cd9b72b4d(e,_){getObject(e).compileShader(getObject(_))}function __wbg_copyTexSubImage2D_3029f8dfe7543ab6(e,_,t,r,n,c,b,a,u){getObject(e).copyTexSubImage2D(_>>>0,t,r,n,c,b,a,u)}function __wbg_createBuffer_59051f4461e7c5e2(e){const _=getObject(e).createBuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createFramebuffer_223c1212ad76affc(e){const _=getObject(e).createFramebuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createProgram_88dbe21c0b682e1a(e){const _=getObject(e).createProgram();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createRenderbuffer_bcb61b756ba21490(e){const _=getObject(e).createRenderbuffer();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_createShader_9d7d388633caad18(e,_){const t=getObject(e).createShader(_>>>0);return isLikeNone(t)?0:addHeapObject(t)}function __wbg_createTexture_9d0bb4d741b8ad76(e){const _=getObject(e).createTexture();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_cullFace_4c086dc1d86a19b5(e,_){getObject(e).cullFace(_>>>0)}function __wbg_deleteBuffer_cdc6b9c73f54aff7(e,_){getObject(e).deleteBuffer(getObject(_))}function __wbg_deleteFramebuffer_fcc10cb143c6573d(e,_){getObject(e).deleteFramebuffer(getObject(_))}function __wbg_deleteProgram_d8d7fc79ba83b256(e,_){getObject(e).deleteProgram(getObject(_))}function __wbg_deleteRenderbuffer_edf9e1b4e0a1e005(e,_){getObject(e).deleteRenderbuffer(getObject(_))}function __wbg_deleteShader_9a2f85efe5cb3706(e,_){getObject(e).deleteShader(getObject(_))}function __wbg_deleteTexture_a883356c5034d482(e,_){getObject(e).deleteTexture(getObject(_))}function __wbg_depthFunc_4eda7b4e682acbad(e,_){getObject(e).depthFunc(_>>>0)}function __wbg_depthMask_a3071e13bb087102(e,_){getObject(e).depthMask(0!==_)}function __wbg_depthRange_ff5298a73fd02650(e,_,t){getObject(e).depthRange(_,t)}function __wbg_disable_5cf2070641fa2ed7(e,_){getObject(e).disable(_>>>0)}function __wbg_disableVertexAttribArray_8dacd44e21adcaa2(e,_){getObject(e).disableVertexAttribArray(_>>>0)}function __wbg_drawArrays_d5c7dc2b2376c85a(e,_,t,r){getObject(e).drawArrays(_>>>0,t,r)}function __wbg_enable_8965e69c596f0a94(e,_){getObject(e).enable(_>>>0)}function __wbg_enableVertexAttribArray_2b0475db43533cf2(e,_){getObject(e).enableVertexAttribArray(_>>>0)}function __wbg_framebufferRenderbuffer_d80f5381d429bc45(e,_,t,r,n){getObject(e).framebufferRenderbuffer(_>>>0,t>>>0,r>>>0,getObject(n))}function __wbg_framebufferTexture2D_953e69a8bec22fa9(e,_,t,r,n,c){getObject(e).framebufferTexture2D(_>>>0,t>>>0,r>>>0,getObject(n),c)}function __wbg_frontFace_0ba67b9e6365557c(e,_){getObject(e).frontFace(_>>>0)}function __wbg_getActiveUniform_87df972e841afed2(e,_,t){const r=getObject(e).getActiveUniform(getObject(_),t>>>0);return isLikeNone(r)?0:addHeapObject(r)}function __wbg_getParameter_bfab7f0b00c9d7fb(){return handleError((function(e,_){return addHeapObject(getObject(e).getParameter(_>>>0))}),arguments)}function __wbg_getProgramInfoLog_0b7af4ad85fa52a4(e,_,t){const r=getObject(_).getProgramInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getProgramParameter_2a3735278367f8bc(e,_,t){return addHeapObject(getObject(e).getProgramParameter(getObject(_),t>>>0))}function __wbg_getShaderInfoLog_979aafa403ffb252(e,_,t){const r=getObject(_).getShaderInfoLog(getObject(t));var n=isLikeNone(r)?0:passStringToWasm0(r,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),c=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=c,getInt32Memory0()[e/4+0]=n}function __wbg_getShaderParameter_e8054f1d9026fb70(e,_,t){return addHeapObject(getObject(e).getShaderParameter(getObject(_),t>>>0))}function __wbg_getUniformLocation_688976233799a45a(e,_,t,r){const n=getObject(e).getUniformLocation(getObject(_),getStringFromWasm0(t,r));return isLikeNone(n)?0:addHeapObject(n)}function __wbg_linkProgram_9a2d12d120d99917(e,_){getObject(e).linkProgram(getObject(_))}function __wbg_pixelStorei_5ec932ebefd00149(e,_,t){getObject(e).pixelStorei(_>>>0,t)}function __wbg_polygonOffset_55eea57bba1b49e9(e,_,t){getObject(e).polygonOffset(_,t)}function __wbg_renderbufferStorage_4bcd9ddf1749ce26(e,_,t,r,n){getObject(e).renderbufferStorage(_>>>0,t>>>0,r,n)}function __wbg_scissor_c8ec3b1e053f3756(e,_,t,r,n){getObject(e).scissor(_,t,r,n)}function __wbg_shaderSource_f435f9b74440bb54(e,_,t,r){getObject(e).shaderSource(getObject(_),getStringFromWasm0(t,r))}function __wbg_stencilFuncSeparate_0fae0ee7c04a23b2(e,_,t,r,n){getObject(e).stencilFuncSeparate(_>>>0,t>>>0,r,n>>>0)}function __wbg_stencilMask_79416c29ac1ce3a4(e,_){getObject(e).stencilMask(_>>>0)}function __wbg_stencilMaskSeparate_19bdb57664d2c34f(e,_,t){getObject(e).stencilMaskSeparate(_>>>0,t>>>0)}function __wbg_stencilOpSeparate_18e0bd316555925f(e,_,t,r,n){getObject(e).stencilOpSeparate(_>>>0,t>>>0,r>>>0,n>>>0)}function __wbg_texParameteri_1f17358e51eb8069(e,_,t,r){getObject(e).texParameteri(_>>>0,t>>>0,r)}function __wbg_uniform1f_7586c5e17ad254c9(e,_,t){getObject(e).uniform1f(getObject(_),t)}function __wbg_uniform1i_9f94ef0ba6b3cc66(e,_,t){getObject(e).uniform1i(getObject(_),t)}function __wbg_uniform4f_9aa5afa9177c6ab1(e,_,t,r,n,c){getObject(e).uniform4f(getObject(_),t,r,n,c)}function __wbg_useProgram_019eb6df066fabf5(e,_){getObject(e).useProgram(getObject(_))}function __wbg_vertexAttribPointer_ca11984ee8843c0a(e,_,t,r,n,c,b){getObject(e).vertexAttribPointer(_>>>0,t,r>>>0,0!==n,c,b)}function __wbg_viewport_6ebef187c89e2616(e,_,t,r,n){getObject(e).viewport(_,t,r,n)}function __wbg_copyToChannel_6e4bd2545a53db54(){return handleError((function(e,_,t,r){getObject(e).copyToChannel(getArrayF32FromWasm0(_,t),r)}),arguments)}function __wbg_setbuffer_beeece042e02534f(e,_){getObject(e).buffer=getObject(_)}function __wbg_setonended_83dd83b7f84cdef2(e,_){getObject(e).onended=getObject(_)}function __wbg_start_99ecc2647eb67ca6(){return handleError((function(e,_){getObject(e).start(_)}),arguments)}function __wbg_charCode_75cea1a3a6d66388(e){return getObject(e).charCode}function __wbg_keyCode_dfa86be31f5ef90c(e){return getObject(e).keyCode}function __wbg_altKey_612289acf855835c(e){return getObject(e).altKey}function __wbg_ctrlKey_582686fb2263dd3c(e){return getObject(e).ctrlKey}function __wbg_shiftKey_48e8701355d8e2d4(e){return getObject(e).shiftKey}function __wbg_metaKey_43193b7cc99f8914(e){return getObject(e).metaKey}function __wbg_key_8aeaa079126a9cc7(e,_){const t=passStringToWasm0(getObject(_).key,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_code_96d6322b968b2d17(e,_){const t=passStringToWasm0(getObject(_).code,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_getModifierState_5102ee8843516d2f(e,_,t){return getObject(e).getModifierState(getStringFromWasm0(_,t))}function __wbg_getSupportedProfiles_420ce044cc3114a1(e){const _=getObject(e).getSupportedProfiles();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_drawBuffersWEBGL_139bf2fe0c1522d6(e,_){getObject(e).drawBuffersWEBGL(getObject(_))}function __wbg_connect_3f8f5ba805800c62(){return handleError((function(e,_){return addHeapObject(getObject(e).connect(getObject(_)))}),arguments)}function __wbg_x_6c8af74c3b4d8c09(e){return getObject(e).x}function __wbg_y_4cca2672ce1b5fc1(e){return getObject(e).y}function __wbg_destination_9e793cf556243084(e){return addHeapObject(getObject(e).destination)}function __wbg_currentTime_c6831b97750b898c(e){return getObject(e).currentTime}function __wbg_newwithcontextoptions_3fb88aa326cd01e0(){return handleError((function(e){return addHeapObject(new lAudioContext(getObject(e)))}),arguments)}function __wbg_close_51aa5539747ce076(){return handleError((function(e){return addHeapObject(getObject(e).close())}),arguments)}function __wbg_createBuffer_13cd030d2b48e8fa(){return handleError((function(e,_,t,r){return addHeapObject(getObject(e).createBuffer(_>>>0,t>>>0,r))}),arguments)}function __wbg_createBufferSource_58423f6345b5f559(){return handleError((function(e){return addHeapObject(getObject(e).createBufferSource())}),arguments)}function __wbg_resume_9dc64ed7c3a65255(){return handleError((function(e){return addHeapObject(getObject(e).resume())}),arguments)}function __wbg_debug_9a6b3243fbbebb61(e){console.debug(getObject(e))}function __wbg_error_788ae33f81d3b84b(e){console.error(getObject(e))}function __wbg_error_c9309504864e78b5(e,_){console.error(getObject(e),getObject(_))}function __wbg_info_2e30e8204b29d91d(e){console.info(getObject(e))}function __wbg_log_1d3ae0273d8f4f8a(e){console.log(getObject(e))}function __wbg_warn_d60e832f9882c1b2(e){console.warn(getObject(e))}function __wbg_appendChild_51339d4cde00ee22(){return handleError((function(e,_){return addHeapObject(getObject(e).appendChild(getObject(_)))}),arguments)}function __wbg_pointerId_701aab7b4fb073ff(e){return getObject(e).pointerId}function __wbg_pressure_e388b6fd623a3917(e){return getObject(e).pressure}function __wbg_pointerType_0009b1e4e6b0f428(e,_){const t=passStringToWasm0(getObject(_).pointerType,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_bindVertexArrayOES_b7d9da7e073aa6b5(e,_){getObject(e).bindVertexArrayOES(getObject(_))}function __wbg_createVertexArrayOES_6a3c3a5a68201f8f(e){const _=getObject(e).createVertexArrayOES();return isLikeNone(_)?0:addHeapObject(_)}function __wbg_deleteVertexArrayOES_7bf4589e63d84df6(e,_){getObject(e).deleteVertexArrayOES(getObject(_))}function __wbg_instanceof_HtmlCanvasElement_da5f9efa0688cf6d(e){let _;try{_=getObject(e)instanceof HTMLCanvasElement}catch{_=!1}return _}function __wbg_width_2931aaedd21f1fff(e){return getObject(e).width}function __wbg_setwidth_a667a942dba6656e(e,_){getObject(e).width=_>>>0}function __wbg_height_0d36fbbeb60b0661(e){return getObject(e).height}function __wbg_setheight_a747d440760fe5aa(e,_){getObject(e).height=_>>>0}function __wbg_getContext_6d1f155bb5c1096a(){return handleError((function(e,_,t,r){const n=getObject(e).getContext(getStringFromWasm0(_,t),getObject(r));return isLikeNone(n)?0:addHeapObject(n)}),arguments)}function __wbg_width_0b4991f5cf7c640a(e){return getObject(e).width}function __wbg_setwidth_15266a5e81f43cf0(e,_){getObject(e).width=_>>>0}function __wbg_height_8cce73e95fb10fd3(e){return getObject(e).height}function __wbg_setheight_2e9bab573f1775a6(e,_){getObject(e).height=_>>>0}function __wbg_framebufferTextureMultiviewOVR_4d911c3fccedc517(e,_,t,r,n,c,b){getObject(e).framebufferTextureMultiviewOVR(_>>>0,t>>>0,getObject(r),n,c,b)}function __wbg_deltaX_84508d00a1050e70(e){return getObject(e).deltaX}function __wbg_deltaY_64823169afb0335d(e){return getObject(e).deltaY}function __wbg_deltaMode_1c680147cfdba8a5(e){return getObject(e).deltaMode}function __wbg_setProperty_b95ef63ab852879e(){return handleError((function(e,_,t,r,n){getObject(e).setProperty(getStringFromWasm0(_,t),getStringFromWasm0(r,n))}),arguments)}function __wbg_width_019b79813c2e80cf(e){return getObject(e).width}function __wbg_height_12082005add04bb5(e){return getObject(e).height}function __wbg_size_6eb4aa794f6bf220(e){return getObject(e).size}function __wbg_type_37bb6b4936b5e027(e){return getObject(e).type}function __wbg_name_ebae3a7e89367611(e,_){const t=passStringToWasm0(getObject(_).name,wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbg_drawArraysInstancedANGLE_01b862ba133350a3(e,_,t,r,n){getObject(e).drawArraysInstancedANGLE(_>>>0,t,r,n)}function __wbg_drawElementsInstancedANGLE_ea6343af8bf9c9f8(e,_,t,r,n,c){getObject(e).drawElementsInstancedANGLE(_>>>0,t,r>>>0,n,c)}function __wbg_vertexAttribDivisorANGLE_a8476eb778e16c70(e,_,t){getObject(e).vertexAttribDivisorANGLE(_>>>0,t>>>0)}function __wbg_target_f171e89c61e2bccf(e){const _=getObject(e).target;return isLikeNone(_)?0:addHeapObject(_)}function __wbg_cancelBubble_90d1c3aa2a76cbeb(e){return getObject(e).cancelBubble}function __wbg_preventDefault_24104f3f0a54546a(e){getObject(e).preventDefault()}function __wbg_stopPropagation_55539cfa2506c867(e){getObject(e).stopPropagation()}function __wbg_addEventListener_5651108fc3ffeb6e(){return handleError((function(e,_,t,r){getObject(e).addEventListener(getStringFromWasm0(_,t),getObject(r))}),arguments)}function __wbg_addEventListener_a5963e26cd7b176b(){return handleError((function(e,_,t,r,n){getObject(e).addEventListener(getStringFromWasm0(_,t),getObject(r),getObject(n))}),arguments)}function __wbg_removeEventListener_1fa0d9594cdb0b1d(){return handleError((function(e,_,t,r,n){getObject(e).removeEventListener(getStringFromWasm0(_,t),getObject(r),getObject(n))}),arguments)}function __wbg_videoWidth_02eadb74917aa4fc(e){return getObject(e).videoWidth}function __wbg_videoHeight_dac4c345988e5562(e){return getObject(e).videoHeight}function __wbg_clientX_1a480606ab0cabaa(e){return getObject(e).clientX}function __wbg_clientY_9c7878f7faf3900f(e){return getObject(e).clientY}function __wbg_offsetX_5a58f16f6c3a41b6(e){return getObject(e).offsetX}function __wbg_offsetY_c45b4956f6429a95(e){return getObject(e).offsetY}function __wbg_ctrlKey_0a805df688b5bf42(e){return getObject(e).ctrlKey}function __wbg_shiftKey_8a070ab6169b5fa4(e){return getObject(e).shiftKey}function __wbg_altKey_6fc1761a6b7a406e(e){return getObject(e).altKey}function __wbg_metaKey_d89287be4389a3c1(e){return getObject(e).metaKey}function __wbg_button_7a095234b69de930(e){return getObject(e).button}function __wbg_buttons_d0f40e1650e3fa28(e){return getObject(e).buttons}function __wbg_movementX_966ec323c169d1a6(e){return getObject(e).movementX}function __wbg_movementY_b14b3bc8e1b31f23(e){return getObject(e).movementY}function __wbg_matches_07c564b5b4101cf2(e){return getObject(e).matches}function __wbg_addListener_85fb6e4bd17e8878(){return handleError((function(e,_){getObject(e).addListener(getObject(_))}),arguments)}function __wbg_removeListener_3b62020874cfc3c7(){return handleError((function(e,_){getObject(e).removeListener(getObject(_))}),arguments)}function __wbg_matches_0f7e350783b542c2(e){return getObject(e).matches}function __wbg_now_0cfdc90c97d0c24b(e){return getObject(e).now()}function __wbg_get_44be0491f933a435(e,_){return addHeapObject(getObject(e)[_>>>0])}function __wbg_length_fff51ee6522a1a18(e){return getObject(e).length}function __wbg_new_898a68150f225f2e(){return addHeapObject(new Array)}function __wbg_newnoargs_581967eacc0e2604(e,_){return addHeapObject(new Function(getStringFromWasm0(e,_)))}function __wbg_get_97b561fb56f034b5(){return handleError((function(e,_){return addHeapObject(Reflect.get(getObject(e),getObject(_)))}),arguments)}function __wbg_call_cb65541d95d71282(){return handleError((function(e,_){return addHeapObject(getObject(e).call(getObject(_)))}),arguments)}function __wbg_new_b51585de1b234aff(){return addHeapObject(new Object)}function __wbg_self_1ff1d729e9aae938(){return handleError((function(){return addHeapObject(self.self)}),arguments)}function __wbg_window_5f4faef6c12b79ec(){return handleError((function(){return addHeapObject(window.window)}),arguments)}function __wbg_globalThis_1d39714405582d3c(){return handleError((function(){return addHeapObject(globalThis.globalThis)}),arguments)}function __wbg_global_651f05c6a0944d1c(){return handleError((function(){return addHeapObject(global.global)}),arguments)}function __wbindgen_is_undefined(e){return void 0===getObject(e)}function __wbg_eval_8c72ad5eafe427f2(){return handleError((function(arg0,arg1){const ret=eval(getStringFromWasm0(arg0,arg1));return addHeapObject(ret)}),arguments)}function __wbg_includes_e846113095d52470(e,_,t){return getObject(e).includes(getObject(_),t)}function __wbg_of_053899a68de3ef48(e){return addHeapObject(Array.of(getObject(e)))}function __wbg_push_ca1c26067ef907ac(e,_){return getObject(e).push(getObject(_))}function __wbg_is_205d914af04a8faa(e,_){return Object.is(getObject(e),getObject(_))}function __wbg_buffer_085ec1f694018c4f(e){return addHeapObject(getObject(e).buffer)}function __wbg_newwithbyteoffsetandlength_828b952f0e692245(e,_,t){return addHeapObject(new Int8Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_735ed5ea2ae07fe9(e,_,t){return addHeapObject(new Int16Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_9f43b22ab631d1d6(e,_,t){return addHeapObject(new Int32Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_6da8e527659b86aa(e,_,t){return addHeapObject(new Uint8Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_31ff1024ef0c63c7(e,_,t){return addHeapObject(new Uint16Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_6df0e8c3efd2a5d3(e,_,t){return addHeapObject(new Uint32Array(getObject(e),_>>>0,t>>>0))}function __wbg_newwithbyteoffsetandlength_69193e31c844b792(e,_,t){return addHeapObject(new Float32Array(getObject(e),_>>>0,t>>>0))}function __wbg_set_092e06b0f9d71865(){return handleError((function(e,_,t){return Reflect.set(getObject(e),getObject(_),getObject(t))}),arguments)}function __wbindgen_debug_string(e,_){const t=passStringToWasm0(debugString(getObject(_)),wasm.__wbindgen_malloc,wasm.__wbindgen_realloc),r=WASM_VECTOR_LEN;getInt32Memory0()[e/4+1]=r,getInt32Memory0()[e/4+0]=t}function __wbindgen_throw(e,_){throw new Error(getStringFromWasm0(e,_))}function __wbindgen_memory(){return addHeapObject(wasm.memory)}function __wbindgen_closure_wrapper651(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper653(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper655(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_31))}function __wbindgen_closure_wrapper657(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper659(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper661(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper663(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper665(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper667(e,_,t){return addHeapObject(makeMutClosure(e,_,158,__wbg_adapter_26))}function __wbindgen_closure_wrapper977(e,_,t){return addHeapObject(makeMutClosure(e,_,337,__wbg_adapter_46))}function __wbindgen_closure_wrapper5357(e,_,t){return addHeapObject(makeMutClosure(e,_,2349,__wbg_adapter_49))}}).call(this,__webpack_require__(262)(module))},257:function(e,_,t){"use strict";var r,n,c,b=t(264),a=t(4),u=t(0),f=t(1),o=t(9),d=t(8),i=t(91),g=t(94),w=t(12),p=t(95),s=t(259),l=t(48),k=t(265),m=t(50),x=t(28),O=t(49),j=t(97),y=j.enforce,h=j.get,q=u.Int8Array,S=q&&q.prototype,E=u.Uint8ClampedArray,v=E&&E.prototype,A=q&&k(q),M=S&&k(S),T=Object.prototype,I=u.TypeError,P=x("toStringTag"),D=O("TYPED_ARRAY_TAG"),F=b&&!!m&&"Opera"!==i(u.opera),L=!1,B={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},W={BigInt64Array:8,BigUint64Array:8},R=function(e){var _=k(e);if(o(_)){var t=h(_);return t&&d(t,"TypedArrayConstructor")?t.TypedArrayConstructor:R(_)}},C=function(e){if(!o(e))return!1;var _=i(e);return d(B,_)||d(W,_)};for(r in B)(c=(n=u[r])&&n.prototype)?y(c).TypedArrayConstructor=n:F=!1;for(r in W)(c=(n=u[r])&&n.prototype)&&(y(c).TypedArrayConstructor=n);if((!F||!f(A)||A===Function.prototype)&&(A=function(){throw new I("Incorrect invocation")},F))for(r in B)u[r]&&m(u[r],A);if((!F||!M||M===T)&&(M=A.prototype,F))for(r in B)u[r]&&m(u[r].prototype,M);if(F&&k(v)!==M&&m(v,M),a&&!d(M,P))for(r in L=!0,s(M,P,{configurable:!0,get:function(){return o(this)?this[D]:void 0}}),B)u[r]&&w(u[r],D,r);e.exports={NATIVE_ARRAY_BUFFER_VIEWS:F,TYPED_ARRAY_TAG:L&&D,aTypedArray:function(e){if(C(e))return e;throw new I("Target is not a typed array")},aTypedArrayConstructor:function(e){if(f(e)&&(!m||l(A,e)))return e;throw new I(g(e)+" is not a typed array constructor")},exportTypedArrayMethod:function(e,_,t,r){if(a){if(t)for(var n in B){var c=u[n];if(c&&d(c.prototype,e))try{delete c.prototype[e]}catch(t){try{c.prototype[e]=_}catch(e){}}}M[e]&&!t||p(M,e,t?_:F&&S[e]||_,r)}},exportTypedArrayStaticMethod:function(e,_,t){var r,n;if(a){if(m){if(t)for(r in B)if((n=u[r])&&d(n,e))try{delete n[e]}catch(e){}if(A[e]&&!t)return;try{return p(A,e,t?_:F&&A[e]||_)}catch(e){}}for(r in B)!(n=u[r])||n[e]&&!t||p(n,e,_)}},getTypedArrayConstructor:R,isView:function(e){if(!o(e))return!1;var _=i(e);return"DataView"===_||d(B,_)||d(W,_)},isTypedArray:C,TypedArray:A,TypedArrayPrototype:M}},259:function(e,_,t){"use strict";var r=t(96),n=t(15);e.exports=function(e,_,t){return t.get&&r(t.get,_,{getter:!0}),t.set&&r(t.set,_,{setter:!0}),n.f(e,_,t)}},260:function(e,_,t){"use strict";var r=t(268),n=t(47),c=t(25),b=t(24),a=function(e){var _=1===e;return function(t,a,u){for(var f,o=c(t),d=n(o),i=b(d),g=r(a,u);i-- >0;)if(g(f=d[i],i,o))switch(e){case 0:return f;case 1:return i}return _?-1:void 0}};e.exports={findLast:a(0),findLastIndex:a(1)}},262:function(e,_){e.exports=function(e){if(!e.webpackPolyfill){var _=Object.create(e);_.children||(_.children=[]),Object.defineProperty(_,"loaded",{enumerable:!0,get:function(){return _.l}}),Object.defineProperty(_,"id",{enumerable:!0,get:function(){return _.i}}),Object.defineProperty(_,"exports",{enumerable:!0}),_.webpackPolyfill=1}return _}},263:function(e,_,t){"use strict";var r=t(257),n=t(24),c=t(46),b=r.aTypedArray;(0,r.exportTypedArrayMethod)("at",(function(e){var _=b(this),t=n(_),r=c(e),a=r>=0?r:t+r;return a<0||a>=t?void 0:_[a]}))},264:function(e,_,t){"use strict";e.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(e,_,t){"use strict";var r=t(8),n=t(1),c=t(25),b=t(98),a=t(266),u=b("IE_PROTO"),f=Object,o=f.prototype;e.exports=a?f.getPrototypeOf:function(e){var _=c(e);if(r(_,u))return _[u];var t=_.constructor;return n(t)&&_ instanceof t?t.prototype:_ instanceof f?o:null}},266:function(e,_,t){"use strict";var r=t(2);e.exports=!r((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}))},267:function(e,_,t){"use strict";var r=t(257),n=t(260).findLast,c=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLast",(function(e){return n(c(this),e,arguments.length>1?arguments[1]:void 0)}))},268:function(e,_,t){"use strict";var r=t(269),n=t(27),c=t(30),b=r(r.bind);e.exports=function(e,_){return n(e),void 0===_?e:c?b(e,_):function(){return e.apply(_,arguments)}}},269:function(e,_,t){"use strict";var r=t(16),n=t(3);e.exports=function(e){if("Function"===r(e))return n(e)}},270:function(e,_,t){"use strict";var r=t(257),n=t(260).findLastIndex,c=r.aTypedArray;(0,r.exportTypedArrayMethod)("findLastIndex",(function(e){return n(c(this),e,arguments.length>1?arguments[1]:void 0)}))},271:function(e,_,t){"use strict";var r=t(0),n=t(29),c=t(257),b=t(24),a=t(272),u=t(25),f=t(2),o=r.RangeError,d=r.Int8Array,i=d&&d.prototype,g=i&&i.set,w=c.aTypedArray,p=c.exportTypedArrayMethod,s=!f((function(){var e=new Uint8ClampedArray(2);return n(g,e,{length:1,0:3},1),3!==e[1]})),l=s&&c.NATIVE_ARRAY_BUFFER_VIEWS&&f((function(){var e=new d(2);return e.set(1),e.set("2",1),0!==e[0]||2!==e[1]}));p("set",(function(e){w(this);var _=a(arguments.length>1?arguments[1]:void 0,1),t=u(e);if(s)return n(g,this,t,_);var r=this.length,c=b(t),f=0;if(c+_>r)throw new o("Wrong length");for(;f2?t:r(_),b=new e(c);c>n;)b[n]=_[n++];return b}},278:function(e,_,t){"use strict";var r=t(279),n=t(257),c=t(280),b=t(46),a=t(281),u=n.aTypedArray,f=n.getTypedArrayConstructor,o=n.exportTypedArrayMethod,d=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(e){return 8===e}}();o("with",{with:function(e,_){var t=u(this),n=b(e),o=c(t)?a(_):+_;return r(t,f(t),n,o)}}.with,!d)},279:function(e,_,t){"use strict";var r=t(24),n=t(46),c=RangeError;e.exports=function(e,_,t,b){var a=r(e),u=n(t),f=u<0?a+u:u;if(f>=a||f<0)throw new c("Incorrect index");for(var o=new _(a),d=0;d>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h6cee8a8a79a31718(n,t)}function A(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h372b8368530a22cd(n,t,p(r))}function T(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h3d2bca093c312005(n,t,p(r))}function I(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__hc84f4dc57d3973d9(n,t)}function P(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd341d6c4c2fdfcca(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2541b85afcdc1a90(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function hr(n){const t=c(n).document;return s(t)?0:p(t)}function vr(n){return p(c(n).location)}function xr(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Sr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Ar(n){return c(n).devicePixelRatio}function Tr(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Ir(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Pr(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Dr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Er(n,t){c(n).clearTimeout(t)}function Fr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Br(n){const t=c(n).body;return s(t)?0:p(t)}function Rr(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Mr(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function kr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function Lr(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function Or(n){return p(c(n).getBoundingClientRect())}function Cr(){return L((function(n){c(n).requestFullscreen()}),arguments)}function Vr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function Ur(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function jr(n){return p(c(n).style)}function qr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Wr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Kr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Yr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Gr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Nr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Qr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Xr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function Hr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function zr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function Jr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function Zr(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function $r(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ne(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function te(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function re(n,t){c(n).activeTexture(t>>>0)}function ee(n,t,r){c(n).attachShader(c(t),c(r))}function ue(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function fe(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function oe(n,t,r){c(n).bindTexture(t>>>0,c(r))}function ie(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function _e(n,t){c(n).blendEquation(t>>>0)}function de(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function ae(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function be(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ge(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function we(n,t){c(n).compileShader(c(t))}function se(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function le(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function me(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function pe(n){const t=c(n).createProgram();return s(t)?0:p(t)}function ye(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function he(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function ve(n){const t=c(n).createTexture();return s(t)?0:p(t)}function xe(n,t){c(n).cullFace(t>>>0)}function Se(n,t){c(n).deleteBuffer(c(t))}function Ae(n,t){c(n).deleteFramebuffer(c(t))}function Te(n,t){c(n).deleteProgram(c(t))}function Ie(n,t){c(n).deleteRenderbuffer(c(t))}function Pe(n,t){c(n).deleteShader(c(t))}function De(n,t){c(n).deleteTexture(c(t))}function Ee(n,t){c(n).depthFunc(t>>>0)}function Fe(n,t){c(n).depthMask(0!==t)}function Be(n,t,r){c(n).depthRange(t,r)}function Re(n,t){c(n).disable(t>>>0)}function Me(n,t){c(n).disableVertexAttribArray(t>>>0)}function ke(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Le(n,t){c(n).enable(t>>>0)}function Oe(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ce(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ve(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Ue(n,t){c(n).frontFace(t>>>0)}function je(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function qe(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function We(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ke(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ye(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ge(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Ne(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Qe(n,t){c(n).linkProgram(c(t))}function Xe(n,t,r){c(n).pixelStorei(t>>>0,r)}function He(n,t,r){c(n).polygonOffset(t,r)}function ze(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Je(n,t,r,e,u){c(n).scissor(t,r,e,u)}function Ze(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function $e(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function nu(n,t){c(n).stencilMask(t>>>0)}function tu(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ru(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function eu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function uu(n,t,r){c(n).uniform1f(c(t),r)}function fu(n,t,r){c(n).uniform1i(c(t),r)}function cu(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function ou(n,t){c(n).useProgram(c(t))}function iu(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function _u(n,t,r,e,u){c(n).viewport(t,r,e,u)}function du(n,t){return p(c(n).fetch(c(t)))}function au(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function bu(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function gu(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function wu(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function su(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function lu(){return L((function(){return p(new Headers)}),arguments)}function mu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function pu(n){return c(n).matches}function yu(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function hu(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function vu(n){return c(n).now()}function xu(n){return c(n).deltaX}function Su(n){return c(n).deltaY}function Au(n){return c(n).deltaMode}function Tu(n){return c(n).width}function Iu(n){return c(n).height}function Pu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function Du(n){console.debug(c(n))}function Eu(n){console.error(c(n))}function Fu(n,t){console.error(c(n),c(t))}function Bu(n){console.info(c(n))}function Ru(n){console.log(c(n))}function Mu(n){console.warn(c(n))}function ku(n){return c(n).charCode}function Lu(n){return c(n).keyCode}function Ou(n){return c(n).altKey}function Cu(n){return c(n).ctrlKey}function Vu(n){return c(n).shiftKey}function Uu(n){return c(n).metaKey}function ju(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function qu(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Wu(n,t,r){return c(n).getModifierState(h(t,r))}function Ku(n){return c(n).matches}function Yu(n){return c(n).pointerId}function Gu(n){return c(n).pressure}function Nu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Qu(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function Xu(n){return c(n).width}function Hu(n,t){c(n).width=t>>>0}function zu(n){return c(n).height}function Ju(n,t){c(n).height=t>>>0}function Zu(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function $u(n){const t=c(n).target;return s(t)?0:p(t)}function nf(n){return c(n).cancelBubble}function tf(n){c(n).preventDefault()}function rf(n){c(n).stopPropagation()}function ef(n){return c(n).clientX}function uf(n){return c(n).clientY}function ff(n){return c(n).offsetX}function cf(n){return c(n).offsetY}function of(n){return c(n).ctrlKey}function _f(n){return c(n).shiftKey}function df(n){return c(n).altKey}function af(n){return c(n).metaKey}function bf(n){return c(n).button}function gf(n){return c(n).buttons}function wf(n){return c(n).movementX}function sf(n){return c(n).movementY}function lf(n,t){c(n).bindVertexArrayOES(c(t))}function mf(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function pf(n,t){c(n).deleteVertexArrayOES(c(t))}function yf(n){return c(n).size}function hf(n){return c(n).type}function vf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function xf(n,t){c(n).drawBuffersWEBGL(c(t))}function Sf(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Af(n){return c(n).width}function Tf(n,t){c(n).width=t>>>0}function If(n){return c(n).height}function Pf(n,t){c(n).height=t>>>0}function Df(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Ef(n){return c(n).videoWidth}function Ff(n){return c(n).videoHeight}function Bf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function Rf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function Mf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function kf(n){return c(n).x}function Lf(n){return c(n).y}function Of(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function Cf(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Vf(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Uf(n){return c(n).status}function jf(n){return p(c(n).headers)}function qf(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function Wf(){return L((function(n){return p(c(n).text())}),arguments)}function Kf(n,t){return p(c(n)[t>>>0])}function Yf(n){return c(n).length}function Gf(){return p(new Array)}function Nf(n){return"function"==typeof c(n)}function Qf(n,t){return p(new Function(h(n,t)))}function Xf(n){const t=c(n);return"object"==typeof t&&null!==t}function Hf(n){return p(c(n).next)}function zf(){return L((function(n){return p(c(n).next())}),arguments)}function Jf(n){return c(n).done}function Zf(n){return p(c(n).value)}function $f(){return p(Symbol.iterator)}function nc(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function tc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function rc(){return p(new Object)}function ec(){return L((function(){return p(self.self)}),arguments)}function uc(){return L((function(){return p(window.window)}),arguments)}function fc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function cc(){return L((function(){return p(global.global)}),arguments)}function oc(n){return void 0===c(n)}function ic(n,t,r){return c(n).includes(c(t),r)}function _c(n){return p(Array.of(c(n)))}function dc(n,t){return c(n).push(c(t))}function ac(n,t){return Object.is(c(n),c(t))}function bc(n){return p(Promise.resolve(c(n)))}function gc(n,t){return p(c(n).then(c(t)))}function wc(n,t,r){return p(c(n).then(c(t),c(r)))}function sc(n){return p(c(n).buffer)}function lc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function yc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function hc(n){return p(new Uint8Array(c(n)))}function vc(n,t,r){c(n).set(c(t),r>>>0)}function xc(n){return c(n).length}function Sc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Tc(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Ic(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Pc(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Dc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Ec(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Fc(n,t){throw new Error(h(n,t))}function Bc(){return p(e.memory)}function Rc(n,t,r){return p(x(n,t,130,S))}function Mc(n,t,r){return p(x(n,t,130,A))}function kc(n,t,r){return p(x(n,t,130,A))}function Lc(n,t,r){return p(x(n,t,130,A))}function Oc(n,t,r){return p(x(n,t,130,A))}function Cc(n,t,r){return p(x(n,t,130,A))}function Vc(n,t,r){return p(x(n,t,130,A))}function Uc(n,t,r){return p(x(n,t,130,A))}function jc(n,t,r){return p(x(n,t,130,A))}function qc(n,t,r){return p(x(n,t,384,T))}function Wc(n,t,r){return p(x(n,t,384,T))}function Kc(n,t,r){return p(x(n,t,384,T))}function Yc(n,t,r){return p(x(n,t,384,T))}function Gc(n,t,r){return p(x(n,t,384,T))}function Nc(n,t,r){return p(x(n,t,384,T))}function Qc(n,t,r){return p(x(n,t,384,T))}function Xc(n,t,r){return p(x(n,t,384,I))}function Hc(n,t,r){return p(x(n,t,384,T))}function zc(n,t,r){return p(x(n,t,454,P))}function Jc(n,t,r){return p(x(n,t,810,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(1),_=r(0),d=r(9),a=r(8),b=r(92),g=r(95),w=r(12),s=r(96),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(98),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(97),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(0),f=r(25),c=r(99),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(1),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a>>0;return a().subarray(e,e+r.length).set(r),_=r.length,e}let e=n.length,u=t(e,1)>>>0;const f=a();let c=0;for(;c127)break;f[u+c]=t}if(c!==e){0!==c&&(n=n.slice(c)),u=r(u,e,e=c+3*n.length,1)>>>0;const t=a().subarray(u+c,u+e);c+=g(n,t).written}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(e.memory.buffer)),l}function p(n){o===f.length&&f.push(f.length+1);const t=o;return o=f[t],f[t]=n,t}let y=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,y.decode(a().subarray(n,n+t))}y.decode();let v=null;function x(n,t,r,u){const f={a:n,b:t,cnt:1,dtor:r},c=(...n)=>{f.cnt++;const t=f.a;f.a=0;try{return u(t,f.b,...n)}finally{0==--f.cnt?e.__wbindgen_export_2.get(f.dtor)(t,f.b):f.a=t}};return c.original=f,c}function S(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h1401bd9d59c7de5e(n,t,p(r))}function A(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h68f07b6a9a8c82e2(n,t)}function T(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__h19375d0ed2bfc8c6(n,t,p(r))}function I(n,t){e.wasm_bindgen__convert__closures__invoke0_mut__h23cffd696a819439(n,t)}function P(n,t,r){e.wasm_bindgen__convert__closures__invoke1_mut__hee07ecbef7d21e61(n,t,p(r))}function D(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428b611ebc4ab30(n,t,p(r))}function E(){e.run()}let F=null;function B(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Float32Array(e.memory.buffer)),F).subarray(n/4,n/4+t)}function R(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}let M=null;function k(n,t){return n>>>=0,(null!==M&&0!==M.byteLength||(M=new Uint32Array(e.memory.buffer)),M).subarray(n/4,n/4+t)}function L(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(p(n))}}function O(n){i(n)}function C(n,t){const r=c(t),u="string"==typeof r?r:void 0;var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function V(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function j(n,t){return p(h(n,t))}function q(){return p(new Error)}function W(n,t){const r=w(c(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function K(n,t){let r,u;try{r=n,u=t,console.error(h(n,t))}finally{e.__wbindgen_free(r,u,1)}}function Y(n){return p(fetch(c(n)))}function G(n,t){const r=c(t),u="number"==typeof r?r:void 0;(null!==v&&0!==v.byteLength||(v=new Float64Array(e.memory.buffer)),v)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function N(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Q(n){return p(n)}function X(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch{t=!1}return t}function H(n,t,r){c(n).beginQuery(t>>>0,c(r))}function z(n,t,r,e,u,f){c(n).bindBufferRange(t>>>0,r>>>0,c(e),u,f)}function J(n,t,r){c(n).bindSampler(t>>>0,c(r))}function Z(n,t){c(n).bindVertexArray(c(t))}function $(n,t,r,e,u,f,o,i,_,d,a){c(n).blitFramebuffer(t,r,e,u,f,o,i,_,d>>>0,a>>>0)}function nn(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function tn(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function rn(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function en(n,t,r,e,u){c(n).clearBufferfi(t>>>0,r,e,u)}function un(n,t,r,e,u){c(n).clearBufferfv(t>>>0,r,B(e,u))}function fn(n,t,r,e,u){c(n).clearBufferiv(t>>>0,r,R(e,u))}function cn(n,t,r,e,u){c(n).clearBufferuiv(t>>>0,r,k(e,u))}function on(n,t,r,e){return c(n).clientWaitSync(c(t),r>>>0,e>>>0)}function _n(n,t,r,e,u,f,o,i,_,d){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_,d)}function dn(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function an(n,t,r,e,u,f,o,i,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a,b)}function bn(n,t,r,e,u,f,o,i,_,d,a){c(n).compressedTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,c(a))}function gn(n,t,r,e,u,f){c(n).copyBufferSubData(t>>>0,r>>>0,e,u,f)}function wn(n,t,r,e,u,f,o,i,_,d){c(n).copyTexSubImage3D(t>>>0,r,e,u,f,o,i,_,d)}function sn(n){const t=c(n).createQuery();return s(t)?0:p(t)}function ln(n){const t=c(n).createSampler();return s(t)?0:p(t)}function mn(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function pn(n,t){c(n).deleteQuery(c(t))}function yn(n,t){c(n).deleteSampler(c(t))}function hn(n,t){c(n).deleteSync(c(t))}function vn(n,t){c(n).deleteVertexArray(c(t))}function xn(n,t,r,e,u){c(n).drawArraysInstanced(t>>>0,r,e,u)}function Sn(n,t){c(n).drawBuffers(c(t))}function An(n,t,r,e,u,f){c(n).drawElementsInstanced(t>>>0,r,e>>>0,u,f)}function Tn(n,t){c(n).endQuery(t>>>0)}function In(n,t,r){const e=c(n).fenceSync(t>>>0,r>>>0);return s(e)?0:p(e)}function Pn(n,t,r,e,u,f){c(n).framebufferTextureLayer(t>>>0,r>>>0,c(e),u,f)}function Dn(n,t,r,e){c(n).getBufferSubData(t>>>0,r,c(e))}function En(){return L((function(n,t,r){return p(c(n).getIndexedParameter(t>>>0,r>>>0))}),arguments)}function Fn(n,t,r){return p(c(n).getSyncParameter(c(t),r>>>0))}function Bn(n,t,r,e){return c(n).getUniformBlockIndex(c(t),h(r,e))}function Rn(){return L((function(n,t,r){c(n).invalidateFramebuffer(t>>>0,c(r))}),arguments)}function Mn(n,t){c(n).readBuffer(t>>>0)}function kn(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Ln(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,i)}),arguments)}function On(n,t,r,e,u,f){c(n).renderbufferStorageMultisample(t>>>0,r,e>>>0,u,f)}function Cn(n,t,r,e){c(n).samplerParameterf(c(t),r>>>0,e)}function Vn(n,t,r,e){c(n).samplerParameteri(c(t),r>>>0,e)}function Un(n,t,r,e,u,f){c(n).texStorage2D(t>>>0,r,e>>>0,u,f)}function jn(n,t,r,e,u,f,o){c(n).texStorage3D(t>>>0,r,e>>>0,u,f,o)}function qn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Wn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,d)}),arguments)}function Kn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Yn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Gn(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Nn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,b)}),arguments)}function Qn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Xn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Hn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function zn(){return L((function(n,t,r,e,u,f,o,i,_,d,a,b){c(n).texSubImage3D(t>>>0,r,e,u,f,o,i,_,d>>>0,a>>>0,c(b))}),arguments)}function Jn(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Zn(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function $n(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function nt(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function tt(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function rt(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function et(n,t,r,e){c(n).uniformBlockBinding(c(t),r>>>0,e>>>0)}function ut(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function ft(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function ct(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ot(n,t,r){c(n).vertexAttribDivisor(t>>>0,r>>>0)}function it(n,t,r,e,u,f){c(n).vertexAttribIPointer(t>>>0,r,e>>>0,u,f)}function _t(n,t){c(n).activeTexture(t>>>0)}function dt(n,t,r){c(n).attachShader(c(t),c(r))}function at(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function bt(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function gt(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function wt(n,t,r){c(n).bindTexture(t>>>0,c(r))}function st(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function lt(n,t){c(n).blendEquation(t>>>0)}function mt(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function pt(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function yt(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function ht(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function vt(n,t){c(n).compileShader(c(t))}function xt(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function St(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function At(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Tt(n){const t=c(n).createProgram();return s(t)?0:p(t)}function It(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Pt(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function Dt(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Et(n,t){c(n).cullFace(t>>>0)}function Ft(n,t){c(n).deleteBuffer(c(t))}function Bt(n,t){c(n).deleteFramebuffer(c(t))}function Rt(n,t){c(n).deleteProgram(c(t))}function Mt(n,t){c(n).deleteRenderbuffer(c(t))}function kt(n,t){c(n).deleteShader(c(t))}function Lt(n,t){c(n).deleteTexture(c(t))}function Ot(n,t){c(n).depthFunc(t>>>0)}function Ct(n,t){c(n).depthMask(0!==t)}function Vt(n,t,r){c(n).depthRange(t,r)}function Ut(n,t){c(n).disable(t>>>0)}function jt(n,t){c(n).disableVertexAttribArray(t>>>0)}function qt(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Wt(n,t){c(n).enable(t>>>0)}function Kt(n,t){c(n).enableVertexAttribArray(t>>>0)}function Yt(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Gt(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function Nt(n,t){c(n).frontFace(t>>>0)}function Qt(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function Xt(){return L((function(n,t,r){const e=c(n).getExtension(h(t,r));return s(e)?0:p(e)}),arguments)}function Ht(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function zt(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Jt(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Zt(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function $t(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function nr(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function tr(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function rr(n,t){c(n).linkProgram(c(t))}function er(n,t,r){c(n).pixelStorei(t>>>0,r)}function ur(n,t,r){c(n).polygonOffset(t,r)}function fr(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function cr(n,t,r,e,u){c(n).scissor(t,r,e,u)}function or(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function ir(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function _r(n,t){c(n).stencilMask(t>>>0)}function dr(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function ar(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function br(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function gr(n,t,r){c(n).uniform1f(c(t),r)}function wr(n,t,r){c(n).uniform1i(c(t),r)}function sr(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function lr(n,t){c(n).useProgram(c(t))}function mr(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function pr(n,t,r,e,u){c(n).viewport(t,r,e,u)}function yr(n){return p(c(n).getBoundingClientRect())}function hr(){return L((function(n){c(n).requestFullscreen()}),arguments)}function vr(){return L((function(n,t,r,e,u){c(n).setAttribute(h(t,r),h(e,u))}),arguments)}function xr(){return L((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Sr(n){let t;try{t=c(n)instanceof Window}catch{t=!1}return t}function Ar(n){const t=c(n).document;return s(t)?0:p(t)}function Tr(n){return p(c(n).location)}function Ir(){return L((function(n){return p(c(n).innerWidth)}),arguments)}function Pr(){return L((function(n){return p(c(n).innerHeight)}),arguments)}function Dr(n){return c(n).devicePixelRatio}function Er(){return L((function(n,t,r){const e=c(n).matchMedia(h(t,r));return s(e)?0:p(e)}),arguments)}function Fr(n,t,r){const e=c(n)[h(t,r)];return s(e)?0:p(e)}function Br(){return L((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rr(){return L((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Mr(n,t){c(n).clearTimeout(t)}function kr(){return L((function(n,t,r){return c(n).setTimeout(c(t),r)}),arguments)}function Lr(n){const t=c(n).body;return s(t)?0:p(t)}function Or(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Cr(){return L((function(n,t,r){return p(c(n).createElement(h(t,r)))}),arguments)}function Vr(n,t,r){const e=c(n).getElementById(h(t,r));return s(e)?0:p(e)}function Ur(){return L((function(n,t,r){const e=c(n).querySelector(h(t,r));return s(e)?0:p(e)}),arguments)}function jr(n){return p(c(n).style)}function qr(n,t){return p(c(n).fetch(c(t)))}function Wr(n,t,r,e){c(n).bufferData(t>>>0,r,e>>>0)}function Kr(n,t,r,e){c(n).bufferData(t>>>0,c(r),e>>>0)}function Yr(n,t,r,e){c(n).bufferSubData(t>>>0,r,c(e))}function Gr(n,t,r,e,u,f,o,i,_){c(n).compressedTexSubImage2D(t>>>0,r,e,u,f,o,i>>>0,c(_))}function Nr(){return L((function(n,t,r,e,u,f,o,i){c(n).readPixels(t,r,e,u,f>>>0,o>>>0,c(i))}),arguments)}function Qr(){return L((function(n,t,r,e,u,f,o,i,_,d){c(n).texSubImage2D(t>>>0,r,e,u,f,o,i>>>0,_>>>0,c(d))}),arguments)}function Xr(n,t,r,e){c(n).uniform2fv(c(t),B(r,e))}function Hr(n,t,r,e){c(n).uniform2iv(c(t),R(r,e))}function zr(n,t,r,e){c(n).uniform3fv(c(t),B(r,e))}function Jr(n,t,r,e){c(n).uniform3iv(c(t),R(r,e))}function Zr(n,t,r,e){c(n).uniform4fv(c(t),B(r,e))}function $r(n,t,r,e){c(n).uniform4iv(c(t),R(r,e))}function ne(n,t,r,e,u){c(n).uniformMatrix2fv(c(t),0!==r,B(e,u))}function te(n,t,r,e,u){c(n).uniformMatrix3fv(c(t),0!==r,B(e,u))}function re(n,t,r,e,u){c(n).uniformMatrix4fv(c(t),0!==r,B(e,u))}function ee(n,t){c(n).activeTexture(t>>>0)}function ue(n,t,r){c(n).attachShader(c(t),c(r))}function fe(n,t,r){c(n).bindBuffer(t>>>0,c(r))}function ce(n,t,r){c(n).bindFramebuffer(t>>>0,c(r))}function oe(n,t,r){c(n).bindRenderbuffer(t>>>0,c(r))}function ie(n,t,r){c(n).bindTexture(t>>>0,c(r))}function _e(n,t,r,e,u){c(n).blendColor(t,r,e,u)}function de(n,t){c(n).blendEquation(t>>>0)}function ae(n,t,r){c(n).blendEquationSeparate(t>>>0,r>>>0)}function be(n,t,r){c(n).blendFunc(t>>>0,r>>>0)}function ge(n,t,r,e,u){c(n).blendFuncSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function we(n,t,r,e,u){c(n).colorMask(0!==t,0!==r,0!==e,0!==u)}function se(n,t){c(n).compileShader(c(t))}function le(n,t,r,e,u,f,o,i,_){c(n).copyTexSubImage2D(t>>>0,r,e,u,f,o,i,_)}function me(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function pe(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function ye(n){const t=c(n).createProgram();return s(t)?0:p(t)}function he(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function ve(n,t){const r=c(n).createShader(t>>>0);return s(r)?0:p(r)}function xe(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Se(n,t){c(n).cullFace(t>>>0)}function Ae(n,t){c(n).deleteBuffer(c(t))}function Te(n,t){c(n).deleteFramebuffer(c(t))}function Ie(n,t){c(n).deleteProgram(c(t))}function Pe(n,t){c(n).deleteRenderbuffer(c(t))}function De(n,t){c(n).deleteShader(c(t))}function Ee(n,t){c(n).deleteTexture(c(t))}function Fe(n,t){c(n).depthFunc(t>>>0)}function Be(n,t){c(n).depthMask(0!==t)}function Re(n,t,r){c(n).depthRange(t,r)}function Me(n,t){c(n).disable(t>>>0)}function ke(n,t){c(n).disableVertexAttribArray(t>>>0)}function Le(n,t,r,e){c(n).drawArrays(t>>>0,r,e)}function Oe(n,t){c(n).enable(t>>>0)}function Ce(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ve(n,t,r,e,u){c(n).framebufferRenderbuffer(t>>>0,r>>>0,e>>>0,c(u))}function Ue(n,t,r,e,u,f){c(n).framebufferTexture2D(t>>>0,r>>>0,e>>>0,c(u),f)}function je(n,t){c(n).frontFace(t>>>0)}function qe(n,t,r){const e=c(n).getActiveUniform(c(t),r>>>0);return s(e)?0:p(e)}function We(){return L((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function Ke(n,t,r){const u=c(t).getProgramInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ye(n,t,r){return p(c(n).getProgramParameter(c(t),r>>>0))}function Ge(n,t,r){const u=c(t).getShaderInfoLog(c(r));var f=s(u)?0:w(u,e.__wbindgen_malloc,e.__wbindgen_realloc),o=_;m()[n/4+1]=o,m()[n/4+0]=f}function Ne(n,t,r){return p(c(n).getShaderParameter(c(t),r>>>0))}function Qe(n,t,r,e){const u=c(n).getUniformLocation(c(t),h(r,e));return s(u)?0:p(u)}function Xe(n,t){c(n).linkProgram(c(t))}function He(n,t,r){c(n).pixelStorei(t>>>0,r)}function ze(n,t,r){c(n).polygonOffset(t,r)}function Je(n,t,r,e,u){c(n).renderbufferStorage(t>>>0,r>>>0,e,u)}function Ze(n,t,r,e,u){c(n).scissor(t,r,e,u)}function $e(n,t,r,e){c(n).shaderSource(c(t),h(r,e))}function nu(n,t,r,e,u){c(n).stencilFuncSeparate(t>>>0,r>>>0,e,u>>>0)}function tu(n,t){c(n).stencilMask(t>>>0)}function ru(n,t,r){c(n).stencilMaskSeparate(t>>>0,r>>>0)}function eu(n,t,r,e,u){c(n).stencilOpSeparate(t>>>0,r>>>0,e>>>0,u>>>0)}function uu(n,t,r,e){c(n).texParameteri(t>>>0,r>>>0,e)}function fu(n,t,r){c(n).uniform1f(c(t),r)}function cu(n,t,r){c(n).uniform1i(c(t),r)}function ou(n,t,r,e,u,f){c(n).uniform4f(c(t),r,e,u,f)}function iu(n,t){c(n).useProgram(c(t))}function _u(n,t,r,e,u,f,o){c(n).vertexAttribPointer(t>>>0,r,e>>>0,0!==u,f,o)}function du(n,t,r,e,u){c(n).viewport(t,r,e,u)}function au(n){return c(n).charCode}function bu(n){return c(n).keyCode}function gu(n){return c(n).altKey}function wu(n){return c(n).ctrlKey}function su(n){return c(n).shiftKey}function lu(n){return c(n).metaKey}function mu(n,t){const r=w(c(t).key,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function pu(n,t){const r=w(c(t).code,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function yu(n,t,r){return c(n).getModifierState(h(t,r))}function hu(){return L((function(n,t,r){return p(new Request(h(n,t),c(r)))}),arguments)}function vu(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function xu(n,t){c(n).drawBuffersWEBGL(c(t))}function Su(n){return c(n).x}function Au(n){return c(n).y}function Tu(n){let t;try{t=c(n)instanceof Response}catch{t=!1}return t}function Iu(n,t){const r=w(c(t).url,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Pu(n){return c(n).status}function Du(n){return p(c(n).headers)}function Eu(){return L((function(n){return p(c(n).arrayBuffer())}),arguments)}function Fu(){return L((function(n){return p(c(n).text())}),arguments)}function Bu(n){console.debug(c(n))}function Ru(n){console.error(c(n))}function Mu(n,t){console.error(c(n),c(t))}function ku(n){console.info(c(n))}function Lu(n){console.log(c(n))}function Ou(n){console.warn(c(n))}function Cu(){return L((function(){return p(new Headers)}),arguments)}function Vu(){return L((function(n,t,r,e,u){c(n).append(h(t,r),h(e,u))}),arguments)}function Uu(){return L((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function ju(n){return c(n).pointerId}function qu(n){return c(n).pressure}function Wu(n,t){const r=w(c(t).pointerType,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Ku(n,t){c(n).bindVertexArrayOES(c(t))}function Yu(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function Gu(n,t){c(n).deleteVertexArrayOES(c(t))}function Nu(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch{t=!1}return t}function Qu(n){return c(n).width}function Xu(n,t){c(n).width=t>>>0}function Hu(n){return c(n).height}function zu(n,t){c(n).height=t>>>0}function Ju(){return L((function(n,t,r,e){const u=c(n).getContext(h(t,r),c(e));return s(u)?0:p(u)}),arguments)}function Zu(){return L((function(n,t){const r=w(c(t).origin,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}),arguments)}function $u(n){return c(n).width}function nf(n,t){c(n).width=t>>>0}function tf(n){return c(n).height}function rf(n,t){c(n).height=t>>>0}function ef(n,t,r,e,u,f,o){c(n).framebufferTextureMultiviewOVR(t>>>0,r>>>0,c(e),u,f,o)}function uf(n){return c(n).deltaX}function ff(n){return c(n).deltaY}function cf(n){return c(n).deltaMode}function of(){return L((function(n,t,r,e,u){c(n).setProperty(h(t,r),h(e,u))}),arguments)}function _f(n){return c(n).width}function df(n){return c(n).height}function af(n){return c(n).size}function bf(n){return c(n).type}function gf(n,t){const r=w(c(t).name,e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function wf(n,t,r,e,u){c(n).drawArraysInstancedANGLE(t>>>0,r,e,u)}function sf(n,t,r,e,u,f){c(n).drawElementsInstancedANGLE(t>>>0,r,e>>>0,u,f)}function lf(n,t,r){c(n).vertexAttribDivisorANGLE(t>>>0,r>>>0)}function mf(n){const t=c(n).target;return s(t)?0:p(t)}function pf(n){return c(n).cancelBubble}function yf(n){c(n).preventDefault()}function hf(n){c(n).stopPropagation()}function vf(){return L((function(n,t,r,e){c(n).addEventListener(h(t,r),c(e))}),arguments)}function xf(){return L((function(n,t,r,e,u){c(n).addEventListener(h(t,r),c(e),c(u))}),arguments)}function Sf(){return L((function(n,t,r,e,u){c(n).removeEventListener(h(t,r),c(e),c(u))}),arguments)}function Af(n){return c(n).videoWidth}function Tf(n){return c(n).videoHeight}function If(n){return c(n).clientX}function Pf(n){return c(n).clientY}function Df(n){return c(n).offsetX}function Ef(n){return c(n).offsetY}function Ff(n){return c(n).ctrlKey}function Bf(n){return c(n).shiftKey}function Rf(n){return c(n).altKey}function Mf(n){return c(n).metaKey}function kf(n){return c(n).button}function Lf(n){return c(n).buttons}function Of(n){return c(n).movementX}function Cf(n){return c(n).movementY}function Vf(n){return c(n).matches}function Uf(){return L((function(n,t){c(n).addListener(c(t))}),arguments)}function jf(){return L((function(n,t){c(n).removeListener(c(t))}),arguments)}function qf(n){return c(n).matches}function Wf(n){return c(n).now()}function Kf(n,t){return p(c(n)[t>>>0])}function Yf(n){return c(n).length}function Gf(){return p(new Array)}function Nf(n){return"function"==typeof c(n)}function Qf(n,t){return p(new Function(h(n,t)))}function Xf(n){const t=c(n);return"object"==typeof t&&null!==t}function Hf(n){return p(c(n).next)}function zf(){return L((function(n){return p(c(n).next())}),arguments)}function Jf(n){return c(n).done}function Zf(n){return p(c(n).value)}function $f(){return p(Symbol.iterator)}function nc(){return L((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function tc(){return L((function(n,t){return p(c(n).call(c(t)))}),arguments)}function rc(){return p(new Object)}function ec(){return L((function(){return p(self.self)}),arguments)}function uc(){return L((function(){return p(window.window)}),arguments)}function fc(){return L((function(){return p(globalThis.globalThis)}),arguments)}function cc(){return L((function(){return p(global.global)}),arguments)}function oc(n){return void 0===c(n)}function ic(n,t,r){return c(n).includes(c(t),r)}function _c(n){return p(Array.of(c(n)))}function dc(n,t){return c(n).push(c(t))}function ac(n,t){return Object.is(c(n),c(t))}function bc(n){return p(Promise.resolve(c(n)))}function gc(n,t){return p(c(n).then(c(t)))}function wc(n,t,r){return p(c(n).then(c(t),c(r)))}function sc(n){return p(c(n).buffer)}function lc(n,t,r){return p(new Int8Array(c(n),t>>>0,r>>>0))}function mc(n,t,r){return p(new Int16Array(c(n),t>>>0,r>>>0))}function pc(n,t,r){return p(new Int32Array(c(n),t>>>0,r>>>0))}function yc(n,t,r){return p(new Uint8Array(c(n),t>>>0,r>>>0))}function hc(n){return p(new Uint8Array(c(n)))}function vc(n,t,r){c(n).set(c(t),r>>>0)}function xc(n){return c(n).length}function Sc(n,t,r){return p(new Uint16Array(c(n),t>>>0,r>>>0))}function Ac(n,t,r){return p(new Uint32Array(c(n),t>>>0,r>>>0))}function Tc(n,t,r){return p(new Float32Array(c(n),t>>>0,r>>>0))}function Ic(){return L((function(n){return p(JSON.stringify(c(n)))}),arguments)}function Pc(){return L((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Dc(){return L((function(n,t,r){return Reflect.set(c(n),c(t),c(r))}),arguments)}function Ec(n,t){const r=w(function n(t){const r=typeof t;if("number"==r||"boolean"==r||null==t)return""+t;if("string"==r)return`"${t}"`;if("symbol"==r){const n=t.description;return null==n?"Symbol":`Symbol(${n})`}if("function"==r){const n=t.name;return"string"==typeof n&&n.length>0?`Function(${n})`:"Function"}if(Array.isArray(t)){const r=t.length;let e="[";r>0&&(e+=n(t[0]));for(let u=1;u1))return toString.call(t);if(u=e[1],"Object"==u)try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?`${t.name}: ${t.message}\n${t.stack}`:u}(c(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=r}function Fc(n,t){throw new Error(h(n,t))}function Bc(){return p(e.memory)}function Rc(n,t,r){return p(x(n,t,175,S))}function Mc(n,t,r){return p(x(n,t,175,S))}function kc(n,t,r){return p(x(n,t,175,S))}function Lc(n,t,r){return p(x(n,t,175,S))}function Oc(n,t,r){return p(x(n,t,175,S))}function Cc(n,t,r){return p(x(n,t,175,A))}function Vc(n,t,r){return p(x(n,t,175,S))}function Uc(n,t,r){return p(x(n,t,175,S))}function jc(n,t,r){return p(x(n,t,175,S))}function qc(n,t,r){return p(x(n,t,344,T))}function Wc(n,t,r){return p(x(n,t,344,T))}function Kc(n,t,r){return p(x(n,t,344,T))}function Yc(n,t,r){return p(x(n,t,344,I))}function Gc(n,t,r){return p(x(n,t,344,T))}function Nc(n,t,r){return p(x(n,t,344,T))}function Qc(n,t,r){return p(x(n,t,344,T))}function Xc(n,t,r){return p(x(n,t,344,T))}function Hc(n,t,r){return p(x(n,t,344,T))}function zc(n,t,r){return p(x(n,t,537,P))}function Jc(n,t,r){return p(x(n,t,877,D))}}).call(this,r(262)(n))},257:function(n,t,r){"use strict";var e,u,f,c=r(264),o=r(4),i=r(0),_=r(1),d=r(9),a=r(8),b=r(91),g=r(94),w=r(12),s=r(95),l=r(259),m=r(48),p=r(265),y=r(50),h=r(28),v=r(49),x=r(97),S=x.enforce,A=x.get,T=i.Int8Array,I=T&&T.prototype,P=i.Uint8ClampedArray,D=P&&P.prototype,E=T&&p(T),F=I&&p(I),B=Object.prototype,R=i.TypeError,M=h("toStringTag"),k=v("TYPED_ARRAY_TAG"),L=c&&!!y&&"Opera"!==b(i.opera),O=!1,C={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},V={BigInt64Array:8,BigUint64Array:8},U=function(n){var t=p(n);if(d(t)){var r=A(t);return r&&a(r,"TypedArrayConstructor")?r.TypedArrayConstructor:U(t)}},j=function(n){if(!d(n))return!1;var t=b(n);return a(C,t)||a(V,t)};for(e in C)(f=(u=i[e])&&u.prototype)?S(f).TypedArrayConstructor=u:L=!1;for(e in V)(f=(u=i[e])&&u.prototype)&&(S(f).TypedArrayConstructor=u);if((!L||!_(E)||E===Function.prototype)&&(E=function(){throw new R("Incorrect invocation")},L))for(e in C)i[e]&&y(i[e],E);if((!L||!F||F===B)&&(F=E.prototype,L))for(e in C)i[e]&&y(i[e].prototype,F);if(L&&p(D)!==F&&y(D,F),o&&!a(F,M))for(e in O=!0,l(F,M,{configurable:!0,get:function(){return d(this)?this[k]:void 0}}),C)i[e]&&w(i[e],k,e);n.exports={NATIVE_ARRAY_BUFFER_VIEWS:L,TYPED_ARRAY_TAG:O&&k,aTypedArray:function(n){if(j(n))return n;throw new R("Target is not a typed array")},aTypedArrayConstructor:function(n){if(_(n)&&(!y||m(E,n)))return n;throw new R(g(n)+" is not a typed array constructor")},exportTypedArrayMethod:function(n,t,r,e){if(o){if(r)for(var u in C){var f=i[u];if(f&&a(f.prototype,n))try{delete f.prototype[n]}catch(r){try{f.prototype[n]=t}catch(n){}}}F[n]&&!r||s(F,n,r?t:L&&I[n]||t,e)}},exportTypedArrayStaticMethod:function(n,t,r){var e,u;if(o){if(y){if(r)for(e in C)if((u=i[e])&&a(u,n))try{delete u[n]}catch(n){}if(E[n]&&!r)return;try{return s(E,n,r?t:L&&E[n]||t)}catch(n){}}for(e in C)!(u=i[e])||u[n]&&!r||s(u,n,t)}},getTypedArrayConstructor:U,isView:function(n){if(!d(n))return!1;var t=b(n);return"DataView"===t||a(C,t)||a(V,t)},isTypedArray:j,TypedArray:E,TypedArrayPrototype:F}},259:function(n,t,r){"use strict";var e=r(96),u=r(15);n.exports=function(n,t,r){return r.get&&e(r.get,t,{getter:!0}),r.set&&e(r.set,t,{setter:!0}),u.f(n,t,r)}},260:function(n,t,r){"use strict";var e=r(268),u=r(47),f=r(25),c=r(24),o=function(n){var t=1===n;return function(r,o,i){for(var _,d=f(r),a=u(d),b=c(a),g=e(o,i);b-- >0;)if(g(_=a[b],b,d))switch(n){case 0:return _;case 1:return b}return t?-1:void 0}};n.exports={findLast:o(0),findLastIndex:o(1)}},262:function(n,t){n.exports=function(n){if(!n.webpackPolyfill){var t=Object.create(n);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},263:function(n,t,r){"use strict";var e=r(257),u=r(24),f=r(46),c=e.aTypedArray;(0,e.exportTypedArrayMethod)("at",(function(n){var t=c(this),r=u(t),e=f(n),o=e>=0?e:r+e;return o<0||o>=r?void 0:t[o]}))},264:function(n,t,r){"use strict";n.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},265:function(n,t,r){"use strict";var e=r(8),u=r(1),f=r(25),c=r(98),o=r(266),i=c("IE_PROTO"),_=Object,d=_.prototype;n.exports=o?_.getPrototypeOf:function(n){var t=f(n);if(e(t,i))return t[i];var r=t.constructor;return u(r)&&t instanceof r?r.prototype:t instanceof _?d:null}},266:function(n,t,r){"use strict";var e=r(2);n.exports=!e((function(){function n(){}return n.prototype.constructor=null,Object.getPrototypeOf(new n)!==n.prototype}))},267:function(n,t,r){"use strict";var e=r(257),u=r(260).findLast,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLast",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},268:function(n,t,r){"use strict";var e=r(269),u=r(27),f=r(30),c=e(e.bind);n.exports=function(n,t){return u(n),void 0===t?n:f?c(n,t):function(){return n.apply(t,arguments)}}},269:function(n,t,r){"use strict";var e=r(16),u=r(3);n.exports=function(n){if("Function"===e(n))return u(n)}},270:function(n,t,r){"use strict";var e=r(257),u=r(260).findLastIndex,f=e.aTypedArray;(0,e.exportTypedArrayMethod)("findLastIndex",(function(n){return u(f(this),n,arguments.length>1?arguments[1]:void 0)}))},271:function(n,t,r){"use strict";var e=r(0),u=r(29),f=r(257),c=r(24),o=r(272),i=r(25),_=r(2),d=e.RangeError,a=e.Int8Array,b=a&&a.prototype,g=b&&b.set,w=f.aTypedArray,s=f.exportTypedArrayMethod,l=!_((function(){var n=new Uint8ClampedArray(2);return u(g,n,{length:1,0:3},1),3!==n[1]})),m=l&&f.NATIVE_ARRAY_BUFFER_VIEWS&&_((function(){var n=new a(2);return n.set(1),n.set("2",1),0!==n[0]||2!==n[1]}));s("set",(function(n){w(this);var t=o(arguments.length>1?arguments[1]:void 0,1),r=i(n);if(l)return u(g,this,r,t);var e=this.length,f=c(r),_=0;if(f+t>e)throw new d("Wrong length");for(;_2?r:e(t),c=new n(f);f>u;)c[u]=t[u++];return c}},278:function(n,t,r){"use strict";var e=r(279),u=r(257),f=r(280),c=r(46),o=r(281),i=u.aTypedArray,_=u.getTypedArrayConstructor,d=u.exportTypedArrayMethod,a=!!function(){try{new Int8Array(1).with(2,{valueOf:function(){throw 8}})}catch(n){return 8===n}}();d("with",{with:function(n,t){var r=i(this),u=c(n),d=f(r)?o(t):+t;return e(r,_(r),u,d)}}.with,!a)},279:function(n,t,r){"use strict";var e=r(24),u=r(46),f=RangeError;n.exports=function(n,t,r,c){var o=e(n),i=u(r),_=i<0?o+i:i;if(_>=o||_<0)throw new f("Incorrect index");for(var d=new t(o),a=0;a=t||r<0||w&&e-a>=o}function v(){var e=d();if(m(e))return y(e);f=setTimeout(v,function(e){var r=t-(e-c);return w?s(r,o-(e-a)):r}(e))}function y(e){return f=void 0,x&&n?l(e):(n=_=void 0,u)}function S(){var e=d(),r=m(e);if(n=arguments,_=this,c=e,r){if(void 0===f)return h(c);if(w)return f=setTimeout(v,t),l(c)}return void 0===f&&(f=setTimeout(v,t)),u}return t=g(t)||0,p(r)&&(i=!!r.leading,o=(w="maxWait"in r)?b(g(r.maxWait)||0,t):o,x="trailing"in r?!!r.trailing:x),S.cancel=function(){void 0!==f&&clearTimeout(f),a=0,n=c=_=f=void 0},S.flush=function(){return void 0===f?u:y(d())},S}},function(e,t,r){var n,_; -/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress - * @license MIT */void 0===(_="function"==typeof(n=function(){var e,t,r={version:"0.2.0"},n=r.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:'
'};function _(e,t,r){return er?r:e}function o(e){return 100*(-1+e)}r.configure=function(e){var t,r;for(t in e)void 0!==(r=e[t])&&e.hasOwnProperty(t)&&(n[t]=r);return this},r.status=null,r.set=function(e){var t=r.isStarted();e=_(e,n.minimum,1),r.status=1===e?null:e;var c=r.render(!t),a=c.querySelector(n.barSelector),i=n.speed,b=n.easing;return c.offsetWidth,u((function(t){""===n.positionUsing&&(n.positionUsing=r.getPositioningCSS()),f(a,function(e,t,r){var _;return(_="translate3d"===n.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===n.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+r,_}(e,i,b)),1===e?(f(c,{transition:"none",opacity:1}),c.offsetWidth,setTimeout((function(){f(c,{transition:"all "+i+"ms linear",opacity:0}),setTimeout((function(){r.remove(),t()}),i)}),i)):setTimeout(t,i)})),this},r.isStarted=function(){return"number"==typeof r.status},r.start=function(){r.status||r.set(0);var e=function(){setTimeout((function(){r.status&&(r.trickle(),e())}),n.trickleSpeed)};return n.trickle&&e(),this},r.done=function(e){return e||r.status?r.inc(.3+.5*Math.random()).set(1):this},r.inc=function(e){var t=r.status;return t?("number"!=typeof e&&(e=(1-t)*_(Math.random()*t,.1,.95)),t=_(t+e,0,.994),r.set(t)):r.start()},r.trickle=function(){return r.inc(Math.random()*n.trickleRate)},e=0,t=0,r.promise=function(n){return n&&"resolved"!==n.state()?(0===t&&r.start(),e++,t++,n.always((function(){0==--t?(e=0,r.done()):r.set((e-t)/e)})),this):this},r.render=function(e){if(r.isRendered())return document.getElementById("nprogress");a(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=n.template;var _,u=t.querySelector(n.barSelector),c=e?"-100":o(r.status||0),i=document.querySelector(n.parent);return f(u,{transition:"all 0 linear",transform:"translate3d("+c+"%,0,0)"}),n.showSpinner||(_=t.querySelector(n.spinnerSelector))&&s(_),i!=document.body&&a(i,"nprogress-custom-parent"),i.appendChild(t),t},r.remove=function(){i(document.documentElement,"nprogress-busy"),i(document.querySelector(n.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&s(e)},r.isRendered=function(){return!!document.getElementById("nprogress")},r.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 u=function(){var e=[];function t(){var r=e.shift();r&&r(t)}return function(r){e.push(r),1==e.length&&t()}}(),f=function(){var e=["Webkit","O","Moz","ms"],t={};function r(r){return r=r.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()})),t[r]||(t[r]=function(t){var r=document.body.style;if(t in r)return t;for(var n,_=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);_--;)if((n=e[_]+o)in r)return n;return t}(r))}function n(e,t,n){t=r(t),e.style[t]=n}return function(e,t){var r,_,o=arguments;if(2==o.length)for(r in t)void 0!==(_=t[r])&&t.hasOwnProperty(r)&&n(e,r,_);else n(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:b(e)).indexOf(" "+t+" ")>=0}function a(e,t){var r=b(e),n=r+t;c(r,t)||(e.className=n.substring(1))}function i(e,t){var r,n=b(e);c(e,t)&&(r=n.replace(" "+t+" "," "),e.className=r.substring(1,r.length-1))}function b(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function s(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return r})?n.call(t,r,t,e):n)||(e.exports=_)},function(e,t,r){"use strict";var n=r(119);e.exports=function(e){return n(e.length)}},function(e,t,r){"use strict";var n=r(52),_=Object;e.exports=function(e){return _(n(e))}},function(e,t,r){"use strict";var n=r(1),_=r(51).f,o=r(12),u=r(96),f=r(35),c=r(64),a=r(122);e.exports=function(e,t){var r,i,b,s,d,p=e.target,g=e.global,w=e.stat;if(r=g?n:w?n[p]||f(p,{}):(n[p]||{}).prototype)for(i in t){if(s=t[i],b=e.dontCallGetSet?(d=_(r,i))&&d.value:r[i],!a(g?i:p+(w?".":"#")+i,e.forced)&&void 0!==b){if(typeof s==typeof b)continue;c(s,b)}(e.sham||b&&b.sham)&&o(s,"sham",!0),u(r,i,s,e)}}},function(e,t,r){"use strict";var n=r(0),_=r(95),o=TypeError;e.exports=function(e){if(n(e))return e;throw new o(_(e)+" is not a function")}},function(e,t,r){"use strict";var n=r(1),_=r(60),o=r(8),u=r(49),f=r(58),c=r(57),a=n.Symbol,i=_("wks"),b=c?a.for||a:a&&a.withoutSetter||u;e.exports=function(e){return o(i,e)||(i[e]=f&&o(a,e)?a[e]:b("Symbol."+e)),i[e]}},function(e,t,r){"use strict";var n=r(30),_=Function.prototype.call;e.exports=n?_.bind(_):function(){return _.apply(_,arguments)}},function(e,t,r){"use strict";var n=r(2);e.exports=!n((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,r){"use strict";e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,r){"use strict";var n=r(47),_=r(52);e.exports=function(e){return n(_(e))}},function(e,t,r){"use strict";var n=r(1),_=r(0),o=function(e){return _(e)?e:void 0};e.exports=function(e,t){return arguments.length<2?o(n[e]):n[e]&&n[e][t]}},function(e,t,r){"use strict";var n=r(1),_=r(35),o=n["__core-js_shared__"]||_("__core-js_shared__",{});e.exports=o},function(e,t,r){"use strict";var n=r(1),_=Object.defineProperty;e.exports=function(e,t){try{_(n,e,{value:t,configurable:!0,writable:!0})}catch(r){n[e]=t}return t}},function(e,t,r){"use strict";var n=r(9),_=String,o=TypeError;e.exports=function(e){if(n(e))return e;throw new o(_(e)+" is not an object")}},function(e,t,r){var n=r(144),_=r(11),o=Object.prototype,u=o.hasOwnProperty,f=o.propertyIsEnumerable,c=n(function(){return arguments}())?n:function(e){return _(e)&&u.call(e,"callee")&&!f.call(e,"callee")};e.exports=c},function(e,t,r){var n=r(10)(r(5),"Map");e.exports=n},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},function(e,t,r){var n=r(164),_=r(171),o=r(173),u=r(174),f=r(175);function c(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t-1&&e%1==0&&e<=9007199254740991}},function(e,t,r){var n=r(6),_=r(44),o=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,u=/^\w*$/;e.exports=function(e,t){if(n(e))return!1;var r=typeof e;return!("number"!=r&&"symbol"!=r&&"boolean"!=r&&null!=e&&!_(e))||(u.test(e)||!o.test(e)||null!=t&&e in Object(t))}},function(e,t,r){var n=r(14),_=r(11);e.exports=function(e){return"symbol"==typeof e||_(e)&&"[object Symbol]"==n(e)}},function(e,t){e.exports=function(e){return e}},function(e,t,r){"use strict";var n=r(118);e.exports=function(e){var t=+e;return t!=t||0===t?0:n(t)}},function(e,t,r){"use strict";var n=r(3),_=r(2),o=r(16),u=Object,f=n("".split);e.exports=_((function(){return!u("z").propertyIsEnumerable(0)}))?function(e){return"String"===o(e)?f(e,""):u(e)}:u},function(e,t,r){"use strict";var n=r(3);e.exports=n({}.isPrototypeOf)},function(e,t,r){"use strict";var n=r(3),_=0,o=Math.random(),u=n(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+u(++_+o,36)}},function(e,t,r){"use strict";var n=r(131),_=r(36),o=r(132);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,r={};try{(e=n(Object.prototype,"__proto__","set"))(r,[]),t=r instanceof Array}catch(e){}return function(r,n){return _(r),o(n),t?e(r,n):r.__proto__=n,r}}():void 0)},function(e,t,r){"use strict";var n=r(4),_=r(29),o=r(104),u=r(31),f=r(32),c=r(54),a=r(8),i=r(62),b=Object.getOwnPropertyDescriptor;t.f=n?b:function(e,t){if(e=f(e),t=c(t),i)try{return b(e,t)}catch(e){}if(a(e,t))return u(!_(o.f,e,t),e[t])}},function(e,t,r){"use strict";var n=r(53),_=TypeError;e.exports=function(e){if(n(e))throw new _("Can't call method on "+e);return e}},function(e,t,r){"use strict";e.exports=function(e){return null==e}},function(e,t,r){"use strict";var n=r(94),_=r(56);e.exports=function(e){var t=n(e,"string");return _(t)?t:t+""}},function(e,t,r){"use strict";var n="object"==typeof document&&document.all,_=void 0===n&&void 0!==n;e.exports={all:n,IS_HTMLDDA:_}},function(e,t,r){"use strict";var n=r(33),_=r(0),o=r(48),u=r(57),f=Object;e.exports=u?function(e){return"symbol"==typeof e}:function(e){var t=n("Symbol");return _(t)&&o(t.prototype,f(e))}},function(e,t,r){"use strict";var n=r(58);e.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(e,t,r){"use strict";var n=r(59),_=r(2),o=r(1).String;e.exports=!!Object.getOwnPropertySymbols&&!_((function(){var e=Symbol("symbol detection");return!o(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},function(e,t,r){"use strict";var n,_,o=r(1),u=r(105),f=o.process,c=o.Deno,a=f&&f.versions||c&&c.version,i=a&&a.v8;i&&(_=(n=i.split("."))[0]>0&&n[0]<4?1:+(n[0]+n[1])),!_&&u&&(!(n=u.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=u.match(/Chrome\/(\d+)/))&&(_=+n[1]),e.exports=_},function(e,t,r){"use strict";var n=r(61),_=r(34);(e.exports=function(e,t){return _[e]||(_[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.34.0",mode:n?"pure":"global",copyright:"© 2014-2023 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.34.0/LICENSE",source:"https://github.com/zloirock/core-js"})},function(e,t,r){"use strict";e.exports=!1},function(e,t,r){"use strict";var n=r(4),_=r(2),o=r(108);e.exports=!n&&!_((function(){return 7!==Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},function(e,t,r){"use strict";e.exports={}},function(e,t,r){"use strict";var n=r(8),_=r(113),o=r(51),u=r(15);e.exports=function(e,t,r){for(var f=_(t),c=u.f,a=o.f,i=0;ii))return!1;var s=c.get(e),d=c.get(t);if(s&&d)return s==t&&d==e;var p=-1,g=!0,w=2&r?new n:void 0;for(c.set(e,t),c.set(t,e);++p-1&&e%1==0&&e]/;e.exports=function(e){var t,r=""+e,_=n.exec(r);if(!_)return r;var o="",u=0,f=0;for(u=_.index;u79&&u<83||!o("reduce")},{reduce:function(e){var t=arguments.length;return _(this,e,t,t>1?arguments[1]:void 0)}})},function(e,t,r){"use strict";var n={}.propertyIsEnumerable,_=Object.getOwnPropertyDescriptor,o=_&&!n.call({1:2},1);t.f=o?function(e){var t=_(this,e);return!!t&&t.enumerable}:n},function(e,t,r){"use strict";e.exports="undefined"!=typeof navigator&&String(navigator.userAgent)||""},function(e,t,r){"use strict";var n=r(27),_=r(53);e.exports=function(e,t){var r=e[t];return _(r)?void 0:n(r)}},function(e,t,r){"use strict";var n=r(29),_=r(0),o=r(9),u=TypeError;e.exports=function(e,t){var r,f;if("string"===t&&_(r=e.toString)&&!o(f=n(r,e)))return f;if(_(r=e.valueOf)&&!o(f=n(r,e)))return f;if("string"!==t&&_(r=e.toString)&&!o(f=n(r,e)))return f;throw new u("Can't convert object to primitive value")}},function(e,t,r){"use strict";var n=r(1),_=r(9),o=n.document,u=_(o)&&_(o.createElement);e.exports=function(e){return u?o.createElement(e):{}}},function(e,t,r){"use strict";var n=r(4),_=r(2);e.exports=n&&_((function(){return 42!==Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},function(e,t,r){"use strict";var n=r(4),_=r(8),o=Function.prototype,u=n&&Object.getOwnPropertyDescriptor,f=_(o,"name"),c=f&&"something"===function(){}.name,a=f&&(!n||n&&u(o,"name").configurable);e.exports={EXISTS:f,PROPER:c,CONFIGURABLE:a}},function(e,t,r){"use strict";var n=r(3),_=r(0),o=r(34),u=n(Function.toString);_(o.inspectSource)||(o.inspectSource=function(e){return u(e)}),e.exports=o.inspectSource},function(e,t,r){"use strict";var n=r(1),_=r(0),o=n.WeakMap;e.exports=_(o)&&/native code/.test(String(o))},function(e,t,r){"use strict";var n=r(33),_=r(3),o=r(114),u=r(121),f=r(36),c=_([].concat);e.exports=n("Reflect","ownKeys")||function(e){var t=o.f(f(e)),r=u.f;return r?c(t,r(e)):t}},function(e,t,r){"use strict";var n=r(115),_=r(120).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,_)}},function(e,t,r){"use strict";var n=r(3),_=r(8),o=r(32),u=r(116).indexOf,f=r(63),c=n([].push);e.exports=function(e,t){var r,n=o(e),a=0,i=[];for(r in n)!_(f,r)&&_(n,r)&&c(i,r);for(;t.length>a;)_(n,r=t[a++])&&(~u(i,r)||c(i,r));return i}},function(e,t,r){"use strict";var n=r(32),_=r(117),o=r(24),u=function(e){return function(t,r,u){var f,c=n(t),a=o(c),i=_(u,a);if(e&&r!=r){for(;a>i;)if((f=c[i++])!=f)return!0}else for(;a>i;i++)if((e||i in c)&&c[i]===r)return e||i||0;return!e&&-1}};e.exports={includes:u(!0),indexOf:u(!1)}},function(e,t,r){"use strict";var n=r(46),_=Math.max,o=Math.min;e.exports=function(e,t){var r=n(e);return r<0?_(r+t,0):o(r,t)}},function(e,t,r){"use strict";var n=Math.ceil,_=Math.floor;e.exports=Math.trunc||function(e){var t=+e;return(t>0?_:n)(t)}},function(e,t,r){"use strict";var n=r(46),_=Math.min;e.exports=function(e){return e>0?_(n(e),9007199254740991):0}},function(e,t,r){"use strict";e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,r){"use strict";t.f=Object.getOwnPropertySymbols},function(e,t,r){"use strict";var n=r(2),_=r(0),o=/#|\.prototype\./,u=function(e,t){var r=c[f(e)];return r===i||r!==a&&(_(t)?n(t):!!t)},f=u.normalize=function(e){return String(e).replace(o,".").toLowerCase()},c=u.data={},a=u.NATIVE="N",i=u.POLYFILL="P";e.exports=u},function(e,t,r){"use strict";var n=r(27),_=r(25),o=r(47),u=r(24),f=TypeError,c=function(e){return function(t,r,c,a){var i=_(t),b=o(i),s=u(i);n(r);var d=e?s-1:0,p=e?-1:1;if(c<2)for(;;){if(d in b){a=b[d],d+=p;break}if(d+=p,e?d<0:s<=d)throw new f("Reduce of empty array with no initial value")}for(;e?d>=0:s>d;d+=p)d in b&&(a=r(a,b[d],d,i));return a}};e.exports={left:c(!1),right:c(!0)}},function(e,t,r){"use strict";var n=r(2);e.exports=function(e,t){var r=[][e];return!!r&&n((function(){r.call(null,t||function(){return 1},1)}))}},function(e,t,r){"use strict";var n=r(1),_=r(16);e.exports="process"===_(n.process)},function(e,t,r){"use strict";var n=r(4),_=r(127),o=TypeError,u=Object.getOwnPropertyDescriptor,f=n&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(e){return e instanceof TypeError}}();e.exports=f?function(e,t){if(_(e)&&!u(e,"length").writable)throw new o("Cannot set read only .length");return e.length=t}:function(e,t){return e.length=t}},function(e,t,r){"use strict";var n=r(16);e.exports=Array.isArray||function(e){return"Array"===n(e)}},function(e,t,r){"use strict";var n=TypeError;e.exports=function(e){if(e>9007199254740991)throw n("Maximum allowed index exceeded");return e}},function(e,t,r){"use strict";var n=r(30),_=Function.prototype,o=_.apply,u=_.call;e.exports="object"==typeof Reflect&&Reflect.apply||(n?u.bind(o):function(){return u.apply(o,arguments)})},function(e,t,r){"use strict";var n=r(33),_=r(8),o=r(12),u=r(48),f=r(50),c=r(64),a=r(133),i=r(134),b=r(135),s=r(138),d=r(139),p=r(4),g=r(61);e.exports=function(e,t,r,w){var x=w?2:1,l=e.split("."),h=l[l.length-1],m=n.apply(null,l);if(m){var v=m.prototype;if(!g&&_(v,"cause")&&delete v.cause,!r)return m;var y=n("Error"),S=t((function(e,t){var r=b(w?t:e,void 0),n=w?new m(e):new m;return void 0!==r&&o(n,"message",r),d(n,S,n.stack,2),this&&u(v,this)&&i(n,this,S),arguments.length>x&&s(n,arguments[x]),n}));if(S.prototype=v,"Error"!==h?f?f(S,y):c(S,y,{name:!0}):p&&"stackTraceLimit"in m&&(a(S,m,"stackTraceLimit"),a(S,m,"prepareStackTrace")),c(S,m),!g)try{v.name!==h&&o(v,"name",h),v.constructor=S}catch(e){}return S}}},function(e,t,r){"use strict";var n=r(3),_=r(27);e.exports=function(e,t,r){try{return n(_(Object.getOwnPropertyDescriptor(e,t)[r]))}catch(e){}}},function(e,t,r){"use strict";var n=r(0),_=String,o=TypeError;e.exports=function(e){if("object"==typeof e||n(e))return e;throw new o("Can't set "+_(e)+" as a prototype")}},function(e,t,r){"use strict";var n=r(15).f;e.exports=function(e,t,r){r in e||n(e,r,{configurable:!0,get:function(){return t[r]},set:function(e){t[r]=e}})}},function(e,t,r){"use strict";var n=r(0),_=r(9),o=r(50);e.exports=function(e,t,r){var u,f;return o&&n(u=t.constructor)&&u!==r&&_(f=u.prototype)&&f!==r.prototype&&o(e,f),e}},function(e,t,r){"use strict";var n=r(136);e.exports=function(e,t){return void 0===e?arguments.length<2?"":t:n(e)}},function(e,t,r){"use strict";var n=r(92),_=String;e.exports=function(e){if("Symbol"===n(e))throw new TypeError("Cannot convert a Symbol value to a string");return _(e)}},function(e,t,r){"use strict";var n={};n[r(28)("toStringTag")]="z",e.exports="[object z]"===String(n)},function(e,t,r){"use strict";var n=r(9),_=r(12);e.exports=function(e,t){n(t)&&"cause"in t&&_(e,"cause",t.cause)}},function(e,t,r){"use strict";var n=r(12),_=r(140),o=r(141),u=Error.captureStackTrace;e.exports=function(e,t,r,f){o&&(u?u(e,t):n(e,"stack",_(r,f)))}},function(e,t,r){"use strict";var n=r(3),_=Error,o=n("".replace),u=String(new _("zxcasd").stack),f=/\n\s*at [^:]*:[^\n]*/,c=f.test(u);e.exports=function(e,t){if(c&&"string"==typeof e&&!_.prepareStackTrace)for(;t--;)e=o(e,f,"");return e}},function(e,t,r){"use strict";var n=r(2),_=r(31);e.exports=!n((function(){var e=new Error("a");return!("stack"in e)||(Object.defineProperty(e,"stack",_(1,7)),7!==e.stack)}))},function(e,t,r){var n=r(65),_=r(143);e.exports=function e(t,r,o,u,f){var c=-1,a=t.length;for(o||(o=_),f||(f=[]);++c0&&o(i)?r>1?e(i,r-1,o,u,f):n(f,i):u||(f[f.length]=i)}return f}},function(e,t,r){var n=r(13),_=r(37),o=r(6),u=n?n.isConcatSpreadable:void 0;e.exports=function(e){return o(e)||_(e)||!!(u&&e&&e[u])}},function(e,t,r){var n=r(14),_=r(11);e.exports=function(e){return _(e)&&"[object Arguments]"==n(e)}},function(e,t,r){var n=r(13),_=Object.prototype,o=_.hasOwnProperty,u=_.toString,f=n?n.toStringTag:void 0;e.exports=function(e){var t=o.call(e,f),r=e[f];try{e[f]=void 0;var n=!0}catch(e){}var _=u.call(e);return n&&(t?e[f]=r:delete e[f]),_}},function(e,t){var r=Object.prototype.toString;e.exports=function(e){return r.call(e)}},function(e,t,r){var n=r(148),_=r(204),o=r(45),u=r(6),f=r(214);e.exports=function(e){return"function"==typeof e?e:null==e?o:"object"==typeof e?u(e)?_(e[0],e[1]):n(e):f(e)}},function(e,t,r){var n=r(149),_=r(203),o=r(83);e.exports=function(e){var t=_(e);return 1==t.length&&t[0][2]?o(t[0][0],t[0][1]):function(r){return r===e||n(r,e,t)}}},function(e,t,r){var n=r(67),_=r(71);e.exports=function(e,t,r,o){var u=r.length,f=u,c=!o;if(null==e)return!f;for(e=Object(e);u--;){var a=r[u];if(c&&a[2]?a[1]!==e[a[0]]:!(a[0]in e))return!1}for(;++u-1}},function(e,t,r){var n=r(18);e.exports=function(e,t){var r=this.__data__,_=n(r,e);return _<0?(++this.size,r.push([e,t])):r[_][1]=t,this}},function(e,t,r){var n=r(17);e.exports=function(){this.__data__=new n,this.size=0}},function(e,t){e.exports=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r}},function(e,t){e.exports=function(e){return this.__data__.get(e)}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t,r){var n=r(17),_=r(38),o=r(40);e.exports=function(e,t){var r=this.__data__;if(r instanceof n){var u=r.__data__;if(!_||u.length<199)return u.push([e,t]),this.size=++r.size,this;r=this.__data__=new o(u)}return r.set(e,t),this.size=r.size,this}},function(e,t,r){var n=r(69),_=r(161),o=r(39),u=r(70),f=/^\[object .+?Constructor\]$/,c=Function.prototype,a=Object.prototype,i=c.toString,b=a.hasOwnProperty,s=RegExp("^"+i.call(b).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");e.exports=function(e){return!(!o(e)||_(e))&&(n(e)?s:f).test(u(e))}},function(e,t,r){var n,_=r(162),o=(n=/[^.]+$/.exec(_&&_.keys&&_.keys.IE_PROTO||""))?"Symbol(src)_1."+n:"";e.exports=function(e){return!!o&&o in e}},function(e,t,r){var n=r(5)["__core-js_shared__"];e.exports=n},function(e,t){e.exports=function(e,t){return null==e?void 0:e[t]}},function(e,t,r){var n=r(165),_=r(17),o=r(38);e.exports=function(){this.size=0,this.__data__={hash:new n,map:new(o||_),string:new n}}},function(e,t,r){var n=r(166),_=r(167),o=r(168),u=r(169),f=r(170);function c(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t0){if(++t>=800)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}},function(e,t,r){var n=r(73),_=r(226),o=r(231),u=r(74),f=r(232),c=r(41);e.exports=function(e,t,r){var a=-1,i=_,b=e.length,s=!0,d=[],p=d;if(r)s=!1,i=o;else if(b>=200){var g=t?null:f(e);if(g)return c(g);s=!1,i=u,p=new n}else p=t?[]:d;e:for(;++a-1}},function(e,t,r){var n=r(228),_=r(229),o=r(230);e.exports=function(e,t,r){return t==t?o(e,t,r):n(e,_,r)}},function(e,t){e.exports=function(e,t,r,n){for(var _=e.length,o=r+(n?1:-1);n?o--:++o<_;)if(t(e[o],o,e))return o;return-1}},function(e,t){e.exports=function(e){return e!=e}},function(e,t){e.exports=function(e,t,r){for(var n=r-1,_=e.length;++n<_;)if(e[n]===t)return n;return-1}},function(e,t){e.exports=function(e,t,r){for(var n=-1,_=null==e?0:e.length;++n<_;)if(r(t,e[n]))return!0;return!1}},function(e,t,r){var n=r(81),_=r(233),o=r(41),u=n&&1/o(new n([,-0]))[1]==1/0?function(e){return new n(e)}:_;e.exports=u},function(e,t){e.exports=function(){}},function(e,t,r){var n=r(80),_=r(11);e.exports=function(e){return _(e)&&n(e)}},function(e,t){e.exports=function(e){var t=null==e?0:e.length;return t?e[t-1]:void 0}},function(e,t,r){"use strict";r(86)},function(e,t,r){},function(e,t,r){},function(e,t,r){},function(e,t,r){"use strict";r(87)},function(e,t,r){"use strict";r(88)},function(e,t,r){"use strict";r(89)},function(e,t,r){"use strict";r.r(t); -/*! - * Vue.js v2.7.16 - * (c) 2014-2023 Evan You - * Released under the MIT License. - */ -var n=Object.freeze({}),_=Array.isArray;function o(e){return null==e}function u(e){return null!=e}function f(e){return!0===e}function c(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function a(e){return"function"==typeof e}function i(e){return null!==e&&"object"==typeof e}var b=Object.prototype.toString;function s(e){return"[object Object]"===b.call(e)}function d(e){return"[object RegExp]"===b.call(e)}function p(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function g(e){return u(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function w(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===b?JSON.stringify(e,x,2):String(e)}function x(e,t){return t&&t.__v_isRef?t.value:t}function l(e){var t=parseFloat(e);return isNaN(t)?e:t}function h(e,t){for(var r=Object.create(null),n=e.split(","),_=0;_-1)return e.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function S(e,t){return y.call(e,t)}function P(e){var t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}var A=/-(\w)/g,T=P((function(e){return e.replace(A,(function(e,t){return t?t.toUpperCase():""}))})),E=P((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),D=/\B([A-Z])/g,k=P((function(e){return e.replace(D,"-$1").toLowerCase()}));var I=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function r(r){var n=arguments.length;return n?n>1?e.apply(t,arguments):e.call(t,r):e.call(t)}return r._length=e.length,r};function C(e,t){t=t||0;for(var r=e.length-t,n=new Array(r);r--;)n[r]=e[r+t];return n}function O(e,t){for(var r in t)e[r]=t[r];return e}function M(e){for(var t={},r=0;r0,Z=Y&&Y.indexOf("edge/")>0;Y&&Y.indexOf("android");var ee=Y&&/iphone|ipad|ipod|ios/.test(Y);Y&&/chrome\/\d+/.test(Y),Y&&/phantomjs/.test(Y);var te,re=Y&&Y.match(/firefox\/(\d+)/),ne={}.watch,_e=!1;if(X)try{var oe={};Object.defineProperty(oe,"passive",{get:function(){_e=!0}}),window.addEventListener("test-passive",null,oe)}catch(e){}var ue=function(){return void 0===te&&(te=!X&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),te},fe=X&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ce(e){return"function"==typeof e&&/native code/.test(e.toString())}var ae,ie="undefined"!=typeof Symbol&&ce(Symbol)&&"undefined"!=typeof Reflect&&ce(Reflect.ownKeys);ae="undefined"!=typeof Set&&ce(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 be=null;function se(e){void 0===e&&(e=null),e||be&&be._scope.off(),be=e,e&&e._scope.on()}var de=function(){function e(e,t,r,n,_,o,u,f){this.tag=e,this.data=t,this.children=r,this.text=n,this.elm=_,this.ns=void 0,this.context=o,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=u,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=f,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1}return Object.defineProperty(e.prototype,"child",{get:function(){return this.componentInstance},enumerable:!1,configurable:!0}),e}(),pe=function(e){void 0===e&&(e="");var t=new de;return t.text=e,t.isComment=!0,t};function ge(e){return new de(void 0,void 0,void 0,String(e))}function we(e){var t=new de(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}"function"==typeof SuppressedError&&SuppressedError;var xe=0,le=[],he=function(){function e(){this._pending=!1,this.id=xe++,this.subs=[]}return e.prototype.addSub=function(e){this.subs.push(e)},e.prototype.removeSub=function(e){this.subs[this.subs.indexOf(e)]=null,this._pending||(this._pending=!0,le.push(this))},e.prototype.depend=function(t){e.target&&e.target.addDep(this)},e.prototype.notify=function(e){var t=this.subs.filter((function(e){return e}));for(var r=0,n=t.length;r0&&(Ye((a=e(a,"".concat(r||"","_").concat(n)))[0])&&Ye(b)&&(s[i]=ge(b.text+a[0].text),a.shift()),s.push.apply(s,a)):c(a)?Ye(b)?s[i]=ge(b.text+a):""!==a&&s.push(ge(a)):Ye(a)&&Ye(b)?s[i]=ge(b.text+a.text):(f(t._isVList)&&u(a.tag)&&o(a.key)&&u(r)&&(a.key="__vlist".concat(r,"_").concat(n,"__")),s.push(a)));return s}(e):void 0}function Ye(e){return u(e)&&u(e.text)&&!1===e.isComment}function Qe(e,t){var r,n,o,f,c=null;if(_(e)||"string"==typeof e)for(c=new Array(e.length),r=0,n=e.length;r0,f=t?!!t.$stable:!u,c=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(f&&_&&_!==n&&c===_.$key&&!u&&!_.$hasNormal)return _;for(var a in o={},t)t[a]&&"$"!==a[0]&&(o[a]=wt(e,r,a,t[a]))}else o={};for(var i in r)i in o||(o[i]=xt(r,i));return t&&Object.isExtensible(t)&&(t._normalized=o),H(o,"$stable",f),H(o,"$key",c),H(o,"$hasNormal",u),o}function wt(e,t,r,n){var o=function(){var t=be;se(e);var r=arguments.length?n.apply(null,arguments):n({}),o=(r=r&&"object"==typeof r&&!_(r)?[r]:Xe(r))&&r[0];return se(t),r&&(!o||1===r.length&&o.isComment&&!pt(o))?void 0:r};return n.proxy&&Object.defineProperty(t,r,{get:o,enumerable:!0,configurable:!0}),o}function xt(e,t){return function(){return e[t]}}function lt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};H(t,"_v_attr_proxy",!0),ht(t,e.$attrs,n,e,"$attrs")}return e._attrsProxy},get listeners(){e._listenersProxy||ht(e._listenersProxy={},e.$listeners,n,e,"$listeners");return e._listenersProxy},get slots(){return function(e){e._slotsProxy||vt(e._slotsProxy={},e.$scopedSlots);return e._slotsProxy}(e)},emit:I(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(r){return Ue(e,t,r)}))}}}function ht(e,t,r,n,_){var o=!1;for(var u in t)u in e?t[u]!==r[u]&&(o=!0):(o=!0,mt(e,u,n,_));for(var u in e)u in t||(o=!0,delete e[u]);return o}function mt(e,t,r,n){Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return r[n][t]}})}function vt(e,t){for(var r in t)e[r]=t[r];for(var r in e)r in t||delete e[r]}var yt=null;function St(e,t){return(e.__esModule||ie&&"Module"===e[Symbol.toStringTag])&&(e=e.default),i(e)?t.extend(e):e}function Pt(e){if(_(e))for(var t=0;tdocument.createEvent("Event").timeStamp&&(cr=function(){return ar.now()})}var ir=function(e,t){if(e.post){if(!t.post)return 1}else if(t.post)return-1;return e.id-t.id};function br(){var e,t;for(fr=cr(),or=!0,tr.sort(ir),ur=0;urur&&tr[r].id>e.id;)r--;tr.splice(r+1,0,e)}else tr.push(e);_r||(_r=!0,$t(br))}}function dr(e,t){if(e){for(var r=Object.create(null),n=ie?Reflect.ownKeys(e):Object.keys(e),_=0;_-1)if(o&&!S(_,"default"))u=!1;else if(""===u||u===k(e)){var c=Br(String,_.type);(c<0||f-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!d(e)&&e.test(t)}function Yr(e,t){var r=e.cache,n=e.keys,_=e._vnode,o=e.$vnode;for(var u in r){var f=r[u];if(f){var c=f.name;c&&!t(c)&&Qr(r,u,n,_)}}o.componentOptions.children=void 0}function Qr(e,t,r,n){var _=e[t];!_||n&&_.tag===n.tag||_.componentInstance.$destroy(),e[t]=null,v(r,t)}Hr.prototype._init=function(e){var t=this;t._uid=Wr++,t._isVue=!0,t.__v_skip=!0,t._scope=new Ne(!0),t._scope.parent=void 0,t._scope._vm=!0,e&&e._isComponent?function(e,t){var r=e.$options=Object.create(e.constructor.options),n=t._parentVnode;r.parent=t.parent,r._parentVnode=n;var _=n.componentOptions;r.propsData=_.propsData,r._parentListeners=_.listeners,r._renderChildren=_.children,r._componentTag=_.tag,t.render&&(r.render=t.render,r.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=kr(Kr(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,r=t.parent;if(r&&!t.abstract){for(;r.$options.abstract&&r.$parent;)r=r.$parent;r.$children.push(e)}e.$parent=r,e.$root=r?r.$root:e,e.$children=[],e.$refs={},e._provided=r?r._provided:Object.create(null),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&&Xt(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,r=e.$vnode=t._parentVnode,_=r&&r.context;e.$slots=st(t._renderChildren,_),e.$scopedSlots=r?gt(e.$parent,r.data.scopedSlots,e.$slots):n,e._c=function(t,r,n,_){return At(e,t,r,n,_,!1)},e.$createElement=function(t,r,n,_){return At(e,t,r,n,_,!0)};var o=r&&r.data;Oe(e,"$attrs",o&&o.attrs||n,null,!0),Oe(e,"$listeners",t._parentListeners||n,null,!0)}(t),er(t,"beforeCreate",void 0,!1),function(e){var t=dr(e.$options.inject,e);t&&(De(!1),Object.keys(t).forEach((function(r){Oe(e,r,t[r])})),De(!0))}(t),jr(t),function(e){var t=e.$options.provide;if(t){var r=a(t)?t.call(e):t;if(!i(r))return;for(var n=qe(e),_=ie?Reflect.ownKeys(r):Object.keys(r),o=0;o<_.length;o++){var u=_[o];Object.defineProperty(n,u,Object.getOwnPropertyDescriptor(r,u))}}}(t),er(t,"created"),t.$options.el&&t.$mount(t.$options.el)},function(e){var t={get:function(){return this._data}},r={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",r),e.prototype.$set=Me,e.prototype.$delete=Le,e.prototype.$watch=function(e,t,r){if(s(t))return qr(this,e,t,r);(r=r||{}).user=!0;var n=new Kt(this,e,t,r);if(r.immediate){var _='callback for immediate watcher "'.concat(n.expression,'"');ve(),Et(t,this,[n.value],this,_),ye()}return function(){n.teardown()}}}(Hr),function(e){var t=/^hook:/;e.prototype.$on=function(e,r){var n=this;if(_(e))for(var o=0,u=e.length;o1?C(r):r;for(var n=C(arguments,1),_='event handler for "'.concat(e,'"'),o=0,u=r.length;oparseInt(this.max)&&Qr(e,t[0],t,this._vnode),this.vnodeToCache=null}}},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)Qr(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Yr(e,(function(e){return Xr(t,e)}))})),this.$watch("exclude",(function(t){Yr(e,(function(e){return!Xr(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=Pt(e),r=t&&t.componentOptions;if(r){var n=Gr(r),_=this.include,o=this.exclude;if(_&&(!n||!Xr(_,n))||o&&n&&Xr(o,n))return t;var u=this.cache,f=this.keys,c=null==t.key?r.Ctor.cid+(r.tag?"::".concat(r.tag):""):t.key;u[c]?(t.componentInstance=u[c].componentInstance,v(f,c),f.push(c)):(this.vnodeToCache=t,this.keyToCache=c),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return q}};Object.defineProperty(e,"config",t),e.util={warn:yr,extend:O,mergeOptions:kr,defineReactive:Oe},e.set=Me,e.delete=Le,e.nextTick=$t,e.observable=function(e){return Ce(e),e},e.options=Object.create(null),V.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,O(e.options.components,Zr),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var r=C(arguments,1);return r.unshift(this),a(e.install)?e.install.apply(e,r):a(e)&&e.apply(null,r),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=kr(this.options,e),this}}(e),zr(e),function(e){V.forEach((function(t){e[t]=function(e,r){return r?("component"===t&&s(r)&&(r.name=r.name||e,r=this.options._base.extend(r)),"directive"===t&&a(r)&&(r={bind:r,update:r}),this.options[t+"s"][e]=r,r):this.options[t+"s"][e]}}))}(e)}(Hr),Object.defineProperty(Hr.prototype,"$isServer",{get:ue}),Object.defineProperty(Hr.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Hr,"FunctionalRenderContext",{value:pr}),Hr.version="2.7.16";var en=h("style,class"),tn=h("input,textarea,option,select,progress"),rn=h("contenteditable,draggable,spellcheck"),nn=h("events,caret,typing,plaintext-only"),_n=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,truespeed,typemustmatch,visible"),on="http://www.w3.org/1999/xlink",un=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},fn=function(e){return un(e)?e.slice(6,e.length):""},cn=function(e){return null==e||!1===e};function an(e){for(var t=e.data,r=e,n=e;u(n.componentInstance);)(n=n.componentInstance._vnode)&&n.data&&(t=bn(n.data,t));for(;u(r=r.parent);)r&&r.data&&(t=bn(t,r.data));return function(e,t){if(u(e)||u(t))return sn(e,dn(t));return""}(t.staticClass,t.class)}function bn(e,t){return{staticClass:sn(e.staticClass,t.staticClass),class:u(e.class)?[e.class,t.class]:t.class}}function sn(e,t){return e?t?e+" "+t:e:t||""}function dn(e){return Array.isArray(e)?function(e){for(var t,r="",n=0,_=e.length;n<_;n++)u(t=dn(e[n]))&&""!==t&&(r&&(r+=" "),r+=t);return r}(e):i(e)?function(e){var t="";for(var r in e)e[r]&&(t&&(t+=" "),t+=r);return t}(e):"string"==typeof e?e:""}var pn={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},gn=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"),wn=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),xn=function(e){return gn(e)||wn(e)};var ln=Object.create(null);var hn=h("text,number,password,search,email,tel,url");var mn=Object.freeze({__proto__:null,createElement:function(e,t){var r=document.createElement(e);return"select"!==e||t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&r.setAttribute("multiple","multiple"),r},createElementNS:function(e,t){return document.createElementNS(pn[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,r){e.insertBefore(t,r)},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,"")}}),vn={create:function(e,t){yn(t)},update:function(e,t){e.data.ref!==t.data.ref&&(yn(e,!0),yn(t))},destroy:function(e){yn(e,!0)}};function yn(e,t){var r=e.data.ref;if(u(r)){var n=e.context,o=e.componentInstance||e.elm,f=t?null:o,c=t?void 0:o;if(a(r))Et(r,n,[f],n,"template ref function");else{var i=e.data.refInFor,b="string"==typeof r||"number"==typeof r,s=$e(r),d=n.$refs;if(b||s)if(i){var p=b?d[r]:r.value;t?_(p)&&v(p,o):_(p)?p.includes(o)||p.push(o):b?(d[r]=[o],Sn(n,r,d[r])):r.value=[o]}else if(b){if(t&&d[r]!==o)return;d[r]=c,Sn(n,r,f)}else if(s){if(t&&r.value!==o)return;r.value=f}else 0}}}function Sn(e,t,r){var n=e._setupState;n&&S(n,t)&&($e(n[t])?n[t].value=r:n[t]=r)}var Pn=new de("",{},[]),An=["create","activate","update","remove","destroy"];function Tn(e,t){return e.key===t.key&&e.asyncFactory===t.asyncFactory&&(e.tag===t.tag&&e.isComment===t.isComment&&u(e.data)===u(t.data)&&function(e,t){if("input"!==e.tag)return!0;var r,n=u(r=e.data)&&u(r=r.attrs)&&r.type,_=u(r=t.data)&&u(r=r.attrs)&&r.type;return n===_||hn(n)&&hn(_)}(e,t)||f(e.isAsyncPlaceholder)&&o(t.asyncFactory.error))}function En(e,t,r){var n,_,o={};for(n=t;n<=r;++n)u(_=e[n].key)&&(o[_]=n);return o}var Dn={create:kn,update:kn,destroy:function(e){kn(e,Pn)}};function kn(e,t){(e.data.directives||t.data.directives)&&function(e,t){var r,n,_,o=e===Pn,u=t===Pn,f=Cn(e.data.directives,e.context),c=Cn(t.data.directives,t.context),a=[],i=[];for(r in c)n=f[r],_=c[r],n?(_.oldValue=n.value,_.oldArg=n.arg,Mn(_,"update",t,e),_.def&&_.def.componentUpdated&&i.push(_)):(Mn(_,"bind",t,e),_.def&&_.def.inserted&&a.push(_));if(a.length){var b=function(){for(var r=0;r-1?Rn(e,t,r):_n(t)?cn(r)?e.removeAttribute(t):(r="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,r)):rn(t)?e.setAttribute(t,function(e,t){return cn(t)||"false"===t?"false":"contenteditable"===e&&nn(t)?t:"true"}(t,r)):un(t)?cn(r)?e.removeAttributeNS(on,fn(t)):e.setAttributeNS(on,t,r):Rn(e,t,r)}function Rn(e,t,r){if(cn(r))e.removeAttribute(t);else{if(Q&&!J&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==r&&!e.__ieph){var n=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",n)};e.addEventListener("input",n),e.__ieph=!0}e.setAttribute(t,r)}}var jn={create:Bn,update:Bn};function $n(e,t){var r=t.elm,n=t.data,_=e.data;if(!(o(n.staticClass)&&o(n.class)&&(o(_)||o(_.staticClass)&&o(_.class)))){var f=an(t),c=r._transitionClasses;u(c)&&(f=sn(f,dn(c))),f!==r._prevClass&&(r.setAttribute("class",f),r._prevClass=f)}}var Un,Vn={create:$n,update:$n};function Nn(e,t,r){var n=Un;return function _(){var o=t.apply(null,arguments);null!==o&&Kn(e,_,r,n)}}var qn=Ct&&!(re&&Number(re[1])<=53);function Wn(e,t,r,n){if(qn){var _=fr,o=t;t=o._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=_||e.timeStamp<=0||e.target.ownerDocument!==document)return o.apply(this,arguments)}}Un.addEventListener(e,t,_e?{capture:r,passive:n}:r)}function Kn(e,t,r,n){(n||Un).removeEventListener(e,t._wrapper||t,r)}function Hn(e,t){if(!o(e.data.on)||!o(t.data.on)){var r=t.data.on||{},n=e.data.on||{};Un=t.elm||e.elm,function(e){if(u(e.__r)){var t=Q?"change":"input";e[t]=[].concat(e.__r,e[t]||[]),delete e.__r}u(e.__c)&&(e.change=[].concat(e.__c,e.change||[]),delete e.__c)}(r),He(r,n,Wn,Kn,Nn,t.context),Un=void 0}}var zn,Gn={create:Hn,update:Hn,destroy:function(e){return Hn(e,Pn)}};function Xn(e,t){if(!o(e.data.domProps)||!o(t.data.domProps)){var r,n,_=t.elm,c=e.data.domProps||{},a=t.data.domProps||{};for(r in(u(a.__ob__)||f(a._v_attr_proxy))&&(a=t.data.domProps=O({},a)),c)r in a||(_[r]="");for(r in a){if(n=a[r],"textContent"===r||"innerHTML"===r){if(t.children&&(t.children.length=0),n===c[r])continue;1===_.childNodes.length&&_.removeChild(_.childNodes[0])}if("value"===r&&"PROGRESS"!==_.tagName){_._value=n;var i=o(n)?"":String(n);Yn(_,i)&&(_.value=i)}else if("innerHTML"===r&&wn(_.tagName)&&o(_.innerHTML)){(zn=zn||document.createElement("div")).innerHTML="".concat(n,"");for(var b=zn.firstChild;_.firstChild;)_.removeChild(_.firstChild);for(;b.firstChild;)_.appendChild(b.firstChild)}else if(n!==c[r])try{_[r]=n}catch(e){}}}}function Yn(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var r=!0;try{r=document.activeElement!==e}catch(e){}return r&&e.value!==t}(e,t)||function(e,t){var r=e.value,n=e._vModifiers;if(u(n)){if(n.number)return l(r)!==l(t);if(n.trim)return r.trim()!==t.trim()}return r!==t}(e,t))}var Qn={create:Xn,update:Xn},Jn=P((function(e){var t={},r=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach((function(e){if(e){var n=e.split(r);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}));function Zn(e){var t=e_(e.style);return e.staticStyle?O(e.staticStyle,t):t}function e_(e){return Array.isArray(e)?M(e):"string"==typeof e?Jn(e):e}var t_,r_=/^--/,n_=/\s*!important$/,__=function(e,t,r){if(r_.test(t))e.style.setProperty(t,r);else if(n_.test(r))e.style.setProperty(k(t),r.replace(n_,""),"important");else{var n=u_(t);if(Array.isArray(r))for(var _=0,o=r.length;_-1?t.split(a_).forEach((function(t){return e.classList.add(t)})):e.classList.add(t);else{var r=" ".concat(e.getAttribute("class")||""," ");r.indexOf(" "+t+" ")<0&&e.setAttribute("class",(r+t).trim())}}function b_(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(a_).forEach((function(t){return e.classList.remove(t)})):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var r=" ".concat(e.getAttribute("class")||""," "),n=" "+t+" ";r.indexOf(n)>=0;)r=r.replace(n," ");(r=r.trim())?e.setAttribute("class",r):e.removeAttribute("class")}}function s_(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&O(t,d_(e.name||"v")),O(t,e),t}return"string"==typeof e?d_(e):void 0}}var d_=P((function(e){return{enterClass:"".concat(e,"-enter"),enterToClass:"".concat(e,"-enter-to"),enterActiveClass:"".concat(e,"-enter-active"),leaveClass:"".concat(e,"-leave"),leaveToClass:"".concat(e,"-leave-to"),leaveActiveClass:"".concat(e,"-leave-active")}})),p_=X&&!J,g_="transition",w_="transitionend",x_="animation",l_="animationend";p_&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(g_="WebkitTransition",w_="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(x_="WebkitAnimation",l_="webkitAnimationEnd"));var h_=X?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function m_(e){h_((function(){h_(e)}))}function v_(e,t){var r=e._transitionClasses||(e._transitionClasses=[]);r.indexOf(t)<0&&(r.push(t),i_(e,t))}function y_(e,t){e._transitionClasses&&v(e._transitionClasses,t),b_(e,t)}function S_(e,t,r){var n=A_(e,t),_=n.type,o=n.timeout,u=n.propCount;if(!_)return r();var f="transition"===_?w_:l_,c=0,a=function(){e.removeEventListener(f,i),r()},i=function(t){t.target===e&&++c>=u&&a()};setTimeout((function(){c0&&(r="transition",i=u,b=o.length):"animation"===t?a>0&&(r="animation",i=a,b=c.length):b=(r=(i=Math.max(u,a))>0?u>a?"transition":"animation":null)?"transition"===r?o.length:c.length:0,{type:r,timeout:i,propCount:b,hasTransform:"transition"===r&&P_.test(n[g_+"Property"])}}function T_(e,t){for(;e.length1}function O_(e,t){!0!==t.data.show&&D_(t)}var M_=function(e){var t,r,n={},a=e.modules,i=e.nodeOps;for(t=0;tp?m(e,o(r[x+1])?null:r[x+1].elm,r,d,x,n):d>x&&y(t,b,p)}(b,g,x,r,a):u(x)?(u(e.text)&&i.setTextContent(b,""),m(b,null,x,0,x.length-1,r)):u(g)?y(g,0,g.length-1):u(e.text)&&i.setTextContent(b,""):e.text!==t.text&&i.setTextContent(b,t.text),u(p)&&u(d=p.hook)&&u(d=d.postpatch)&&d(e,t)}}}function T(e,t,r){if(f(r)&&u(e.parent))e.parent.data.pendingInsert=t;else for(var n=0;n-1,u.selected!==o&&(u.selected=o);else if(R(j_(u),n))return void(e.selectedIndex!==f&&(e.selectedIndex=f));_||(e.selectedIndex=-1)}}function R_(e,t){return t.every((function(t){return!R(t,e)}))}function j_(e){return"_value"in e?e._value:e.value}function $_(e){e.target.composing=!0}function U_(e){e.target.composing&&(e.target.composing=!1,V_(e.target,"input"))}function V_(e,t){var r=document.createEvent("HTMLEvents");r.initEvent(t,!0,!0),e.dispatchEvent(r)}function N_(e){return!e.componentInstance||e.data&&e.data.transition?e:N_(e.componentInstance._vnode)}var q_={model:L_,show:{bind:function(e,t,r){var n=t.value,_=(r=N_(r)).data&&r.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;n&&_?(r.data.show=!0,D_(r,(function(){e.style.display=o}))):e.style.display=n?o:"none"},update:function(e,t,r){var n=t.value;!n!=!t.oldValue&&((r=N_(r)).data&&r.data.transition?(r.data.show=!0,n?D_(r,(function(){e.style.display=e.__vOriginalDisplay})):k_(r,(function(){e.style.display="none"}))):e.style.display=n?e.__vOriginalDisplay:"none")},unbind:function(e,t,r,n,_){_||(e.style.display=e.__vOriginalDisplay)}}},W_={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 K_(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?K_(Pt(t.children)):e}function H_(e){var t={},r=e.$options;for(var n in r.propsData)t[n]=e[n];var _=r._parentListeners;for(var n in _)t[T(n)]=_[n];return t}function z_(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var G_=function(e){return e.tag||pt(e)},X_=function(e){return"show"===e.name},Y_={name:"transition",props:W_,abstract:!0,render:function(e){var t=this,r=this.$slots.default;if(r&&(r=r.filter(G_)).length){0;var n=this.mode;0;var _=r[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return _;var o=K_(_);if(!o)return _;if(this._leaving)return z_(e,_);var u="__transition-".concat(this._uid,"-");o.key=null==o.key?o.isComment?u+"comment":u+o.tag:c(o.key)?0===String(o.key).indexOf(u)?o.key:u+o.key:o.key;var f=(o.data||(o.data={})).transition=H_(this),a=this._vnode,i=K_(a);if(o.data.directives&&o.data.directives.some(X_)&&(o.data.show=!0),i&&i.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(o,i)&&!pt(i)&&(!i.componentInstance||!i.componentInstance._vnode.isComment)){var b=i.data.transition=O({},f);if("out-in"===n)return this._leaving=!0,ze(b,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),z_(e,_);if("in-out"===n){if(pt(o))return a;var s,d=function(){s()};ze(f,"afterEnter",d),ze(f,"enterCancelled",d),ze(b,"delayLeave",(function(e){s=e}))}}return _}}},Q_=O({tag:String,moveClass:String},W_);function J_(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Z_(e){e.data.newPos=e.elm.getBoundingClientRect()}function eo(e){var t=e.data.pos,r=e.data.newPos,n=t.left-r.left,_=t.top-r.top;if(n||_){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate(".concat(n,"px,").concat(_,"px)"),o.transitionDuration="0s"}}delete Q_.mode;var to={Transition:Y_,TransitionGroup:{props:Q_,beforeMount:function(){var e=this,t=this._update;this._update=function(r,n){var _=Qt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,_(),t.call(e,r,n)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",r=Object.create(null),n=this.prevChildren=this.children,_=this.$slots.default||[],o=this.children=[],u=H_(this),f=0;f<_.length;f++){if((i=_[f]).tag)if(null!=i.key&&0!==String(i.key).indexOf("__vlist"))o.push(i),r[i.key]=i,(i.data||(i.data={})).transition=u;else;}if(n){var c=[],a=[];for(f=0;f-1?ln[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ln[e]=/HTMLUnknownElement/.test(t.toString())},O(Hr.options.directives,q_),O(Hr.options.components,to),Hr.prototype.__patch__=X?M_:L,Hr.prototype.$mount=function(e,t){return function(e,t,r){var n;e.$el=t,e.$options.render||(e.$options.render=pe),er(e,"beforeMount"),n=function(){e._update(e._render(),r)},new Kt(e,n,L,{before:function(){e._isMounted&&!e._isDestroyed&&er(e,"beforeUpdate")}},!0),r=!1;var _=e._preWatchers;if(_)for(var o=0;o<_.length;o++)_[o].run();return null==e.$vnode&&(e._isMounted=!0,er(e,"mounted")),e}(this,e=e&&X?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},X&&setTimeout((function(){q.devtools&&fe&&fe.emit("init",Hr)}),0);var no=/[!'()*]/g,_o=function(e){return"%"+e.charCodeAt(0).toString(16)},oo=/%2C/g,uo=function(e){return encodeURIComponent(e).replace(no,_o).replace(oo,",")};function fo(e){try{return decodeURIComponent(e)}catch(e){0}return e}var co=function(e){return null==e||"object"==typeof e?e:String(e)};function ao(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var r=e.replace(/\+/g," ").split("="),n=fo(r.shift()),_=r.length>0?fo(r.join("=")):null;void 0===t[n]?t[n]=_:Array.isArray(t[n])?t[n].push(_):t[n]=[t[n],_]})),t):t}function io(e){var t=e?Object.keys(e).map((function(t){var r=e[t];if(void 0===r)return"";if(null===r)return uo(t);if(Array.isArray(r)){var n=[];return r.forEach((function(e){void 0!==e&&(null===e?n.push(uo(t)):n.push(uo(t)+"="+uo(e)))})),n.join("&")}return uo(t)+"="+uo(r)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var bo=/\/?$/;function so(e,t,r,n){var _=n&&n.options.stringifyQuery,o=t.query||{};try{o=po(o)}catch(e){}var u={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:o,params:t.params||{},fullPath:xo(t,_),matched:e?wo(e):[]};return r&&(u.redirectedFrom=xo(r,_)),Object.freeze(u)}function po(e){if(Array.isArray(e))return e.map(po);if(e&&"object"==typeof e){var t={};for(var r in e)t[r]=po(e[r]);return t}return e}var go=so(null,{path:"/"});function wo(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function xo(e,t){var r=e.path,n=e.query;void 0===n&&(n={});var _=e.hash;return void 0===_&&(_=""),(r||"/")+(t||io)(n)+_}function lo(e,t,r){return t===go?e===t:!!t&&(e.path&&t.path?e.path.replace(bo,"")===t.path.replace(bo,"")&&(r||e.hash===t.hash&&ho(e.query,t.query)):!(!e.name||!t.name)&&(e.name===t.name&&(r||e.hash===t.hash&&ho(e.query,t.query)&&ho(e.params,t.params))))}function ho(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var r=Object.keys(e).sort(),n=Object.keys(t).sort();return r.length===n.length&&r.every((function(r,_){var o=e[r];if(n[_]!==r)return!1;var u=t[r];return null==o||null==u?o===u:"object"==typeof o&&"object"==typeof u?ho(o,u):String(o)===String(u)}))}function mo(e){for(var t=0;t=0&&(t=e.slice(n),e=e.slice(0,n));var _=e.indexOf("?");return _>=0&&(r=e.slice(_+1),e=e.slice(0,_)),{path:e,query:r,hash:t}}(_.path||""),a=t&&t.path||"/",i=c.path?So(c.path,a,r||_.append):a,b=function(e,t,r){void 0===t&&(t={});var n,_=r||ao;try{n=_(e||"")}catch(e){n={}}for(var o in t){var u=t[o];n[o]=Array.isArray(u)?u.map(co):co(u)}return n}(c.query,_.query,n&&n.options.parseQuery),s=_.hash||c.hash;return s&&"#"!==s.charAt(0)&&(s="#"+s),{_normalized:!0,path:i,query:b,hash:s}}var Wo,Ko=function(){},Ho={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(e){var t=this,r=this.$router,n=this.$route,_=r.resolve(this.to,n,this.append),o=_.location,u=_.route,f=_.href,c={},a=r.options.linkActiveClass,i=r.options.linkExactActiveClass,b=null==a?"router-link-active":a,s=null==i?"router-link-exact-active":i,d=null==this.activeClass?b:this.activeClass,p=null==this.exactActiveClass?s:this.exactActiveClass,g=u.redirectedFrom?so(null,qo(u.redirectedFrom),null,r):u;c[p]=lo(n,g,this.exactPath),c[d]=this.exact||this.exactPath?c[p]:function(e,t){return 0===e.path.replace(bo,"/").indexOf(t.path.replace(bo,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var r in t)if(!(r in e))return!1;return!0}(e.query,t.query)}(n,g);var w=c[p]?this.ariaCurrentValue:null,x=function(e){zo(e)&&(t.replace?r.replace(o,Ko):r.push(o,Ko))},l={click:zo};Array.isArray(this.event)?this.event.forEach((function(e){l[e]=x})):l[this.event]=x;var h={class:c},m=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:f,route:u,navigate:x,isActive:c[d],isExactActive:c[p]});if(m){if(1===m.length)return m[0];if(m.length>1||!m.length)return 0===m.length?e():e("span",{},m)}if("a"===this.tag)h.on=l,h.attrs={href:f,"aria-current":w};else{var v=function e(t){var r;if(t)for(var n=0;n-1&&(f.params[s]=r.params[s]);return f.path=No(i.path,f.params),c(i,f,u)}if(f.path){f.params={};for(var d=0;d-1}function Pu(e,t){return Su(e)&&e._isRouter&&(null==t||e.type===t)}function Au(e,t,r){var n=function(_){_>=e.length?r():e[_]?t(e[_],(function(){n(_+1)})):n(_+1)};n(0)}function Tu(e){return function(t,r,n){var _=!1,o=0,u=null;Eu(e,(function(e,t,r,f){if("function"==typeof e&&void 0===e.cid){_=!0,o++;var c,a=Iu((function(t){var _;((_=t).__esModule||ku&&"Module"===_[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:Wo.extend(t),r.components[f]=t,--o<=0&&n()})),i=Iu((function(e){var t="Failed to resolve async component "+f+": "+e;u||(u=Su(e)?e:new Error(t),n(u))}));try{c=e(a,i)}catch(e){i(e)}if(c)if("function"==typeof c.then)c.then(a,i);else{var b=c.component;b&&"function"==typeof b.then&&b.then(a,i)}}})),_||n()}}function Eu(e,t){return Du(e.map((function(e){return Object.keys(e.components).map((function(r){return t(e.components[r],e.instances[r],e,r)}))})))}function Du(e){return Array.prototype.concat.apply([],e)}var ku="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Iu(e){var t=!1;return function(){for(var r=[],n=arguments.length;n--;)r[n]=arguments[n];if(!t)return t=!0,e.apply(this,r)}}var Cu=function(e,t){this.router=e,this.base=function(e){if(!e)if(Go){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=go,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function Ou(e,t,r,n){var _=Eu(e,(function(e,n,_,o){var u=function(e,t){"function"!=typeof e&&(e=Wo.extend(e));return e.options[t]}(e,t);if(u)return Array.isArray(u)?u.map((function(e){return r(e,n,_,o)})):r(u,n,_,o)}));return Du(n?_.reverse():_)}function Mu(e,t){if(t)return function(){return e.apply(t,arguments)}}Cu.prototype.listen=function(e){this.cb=e},Cu.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Cu.prototype.onError=function(e){this.errorCbs.push(e)},Cu.prototype.transitionTo=function(e,t,r){var n,_=this;try{n=this.router.match(e,this.current)}catch(e){throw this.errorCbs.forEach((function(t){t(e)})),e}var o=this.current;this.confirmTransition(n,(function(){_.updateRoute(n),t&&t(n),_.ensureURL(),_.router.afterHooks.forEach((function(e){e&&e(n,o)})),_.ready||(_.ready=!0,_.readyCbs.forEach((function(e){e(n)})))}),(function(e){r&&r(e),e&&!_.ready&&(Pu(e,lu.redirected)&&o===go||(_.ready=!0,_.readyErrorCbs.forEach((function(t){t(e)}))))}))},Cu.prototype.confirmTransition=function(e,t,r){var n=this,_=this.current;this.pending=e;var o,u,f=function(e){!Pu(e)&&Su(e)&&(n.errorCbs.length?n.errorCbs.forEach((function(t){t(e)})):console.error(e)),r&&r(e)},c=e.matched.length-1,a=_.matched.length-1;if(lo(e,_)&&c===a&&e.matched[c]===_.matched[a])return this.ensureURL(),e.hash&&uu(this.router,_,e,!1),f(((u=vu(o=_,e,lu.duplicated,'Avoided redundant navigation to current location: "'+o.fullPath+'".')).name="NavigationDuplicated",u));var i=function(e,t){var r,n=Math.max(e.length,t.length);for(r=0;r0)){var t=this.router,r=t.options.scrollBehavior,n=gu&&r;n&&this.listeners.push(ou());var _=function(){var r=e.current,_=Bu(e.base);e.current===go&&_===e._startLocation||e.transitionTo(_,(function(e){n&&uu(t,e,r,!0)}))};window.addEventListener("popstate",_),this.listeners.push((function(){window.removeEventListener("popstate",_)}))}},t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){wu(Po(n.base+e.fullPath)),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.replace=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){xu(Po(n.base+e.fullPath)),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.ensureURL=function(e){if(Bu(this.base)!==this.current.fullPath){var t=Po(this.base+this.current.fullPath);e?wu(t):xu(t)}},t.prototype.getCurrentLocation=function(){return Bu(this.base)},t}(Cu);function Bu(e){var t=window.location.pathname,r=t.toLowerCase(),n=e.toLowerCase();return!e||r!==n&&0!==r.indexOf(Po(n+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Fu=function(e){function t(t,r,n){e.call(this,t,r),n&&function(e){var t=Bu(e);if(!/^\/#/.test(t))return window.location.replace(Po(e+"/#"+t)),!0}(this.base)||Ru()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router.options.scrollBehavior,r=gu&&t;r&&this.listeners.push(ou());var n=function(){var t=e.current;Ru()&&e.transitionTo(ju(),(function(n){r&&uu(e.router,n,t,!0),gu||Vu(n.fullPath)}))},_=gu?"popstate":"hashchange";window.addEventListener(_,n),this.listeners.push((function(){window.removeEventListener(_,n)}))}},t.prototype.push=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){Uu(e.fullPath),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.replace=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){Vu(e.fullPath),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;ju()!==t&&(e?Uu(t):Vu(t))},t.prototype.getCurrentLocation=function(){return ju()},t}(Cu);function Ru(){var e=ju();return"/"===e.charAt(0)||(Vu("/"+e),!1)}function ju(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function $u(e){var t=window.location.href,r=t.indexOf("#");return(r>=0?t.slice(0,r):t)+"#"+e}function Uu(e){gu?wu($u(e)):window.location.hash=e}function Vu(e){gu?xu($u(e)):window.location.replace($u(e))}var Nu=function(e){function t(t,r){e.call(this,t,r),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,r){var n=this;this.transitionTo(e,(function(e){n.stack=n.stack.slice(0,n.index+1).concat(e),n.index++,t&&t(e)}),r)},t.prototype.replace=function(e,t,r){var n=this;this.transitionTo(e,(function(e){n.stack=n.stack.slice(0,n.index).concat(e),t&&t(e)}),r)},t.prototype.go=function(e){var t=this,r=this.index+e;if(!(r<0||r>=this.stack.length)){var n=this.stack[r];this.confirmTransition(n,(function(){var e=t.current;t.index=r,t.updateRoute(n),t.router.afterHooks.forEach((function(t){t&&t(n,e)}))}),(function(e){Pu(e,lu.duplicated)&&(t.index=r)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(Cu),qu=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Qo(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!gu&&!1!==e.fallback,this.fallback&&(t="hash"),Go||(t="abstract"),this.mode=t,t){case"history":this.history=new Lu(this,e.base);break;case"hash":this.history=new Fu(this,e.base,this.fallback);break;case"abstract":this.history=new Nu(this,e.base);break;default:0}},Wu={currentRoute:{configurable:!0}};qu.prototype.match=function(e,t,r){return this.matcher.match(e,t,r)},Wu.currentRoute.get=function(){return this.history&&this.history.current},qu.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var r=t.apps.indexOf(e);r>-1&&t.apps.splice(r,1),t.app===e&&(t.app=t.apps[0]||null),t.app||t.history.teardown()})),!this.app){this.app=e;var r=this.history;if(r instanceof Lu||r instanceof Fu){var n=function(e){r.setupListeners(),function(e){var n=r.current,_=t.options.scrollBehavior;gu&&_&&"fullPath"in e&&uu(t,e,n,!1)}(e)};r.transitionTo(r.getCurrentLocation(),n,n)}r.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},qu.prototype.beforeEach=function(e){return Hu(this.beforeHooks,e)},qu.prototype.beforeResolve=function(e){return Hu(this.resolveHooks,e)},qu.prototype.afterEach=function(e){return Hu(this.afterHooks,e)},qu.prototype.onReady=function(e,t){this.history.onReady(e,t)},qu.prototype.onError=function(e){this.history.onError(e)},qu.prototype.push=function(e,t,r){var n=this;if(!t&&!r&&"undefined"!=typeof Promise)return new Promise((function(t,r){n.history.push(e,t,r)}));this.history.push(e,t,r)},qu.prototype.replace=function(e,t,r){var n=this;if(!t&&!r&&"undefined"!=typeof Promise)return new Promise((function(t,r){n.history.replace(e,t,r)}));this.history.replace(e,t,r)},qu.prototype.go=function(e){this.history.go(e)},qu.prototype.back=function(){this.go(-1)},qu.prototype.forward=function(){this.go(1)},qu.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]}))}))):[]},qu.prototype.resolve=function(e,t,r){var n=qo(e,t=t||this.history.current,r,this),_=this.match(n,t),o=_.redirectedFrom||_.fullPath;return{location:n,route:_,href:function(e,t,r){var n="hash"===r?"#"+t:t;return e?Po(e+"/"+n):n}(this.history.base,o,this.mode),normalizedTo:n,resolved:_}},qu.prototype.getRoutes=function(){return this.matcher.getRoutes()},qu.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},qu.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(qu.prototype,Wu);var Ku=qu;function Hu(e,t){return e.push(t),function(){var r=e.indexOf(t);r>-1&&e.splice(r,1)}}qu.install=function e(t){if(!e.installed||Wo!==t){e.installed=!0,Wo=t;var r=function(e){return void 0!==e},n=function(e,t){var n=e.$options._parentVnode;r(n)&&r(n=n.data)&&r(n=n.registerRouteInstance)&&n(e,t)};t.mixin({beforeCreate:function(){r(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,n(this,this)},destroyed:function(){n(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",vo),t.component("RouterLink",Ho);var _=t.config.optionMergeStrategies;_.beforeRouteEnter=_.beforeRouteLeave=_.beforeRouteUpdate=_.created}},qu.version="3.6.5",qu.isNavigationFailure=Pu,qu.NavigationFailureType=lu,qu.START_LOCATION=go,Go&&window.Vue&&window.Vue.use(qu);r(103);r(93),r(100);var zu={"components/AlgoliaSearchBox":()=>Promise.all([r.e(0),r.e(38)]).then(r.bind(null,424)),"components/DropdownLink":()=>Promise.all([r.e(0),r.e(25)]).then(r.bind(null,296)),"components/DropdownTransition":()=>Promise.all([r.e(0),r.e(39)]).then(r.bind(null,287)),"components/Home":()=>Promise.all([r.e(0),r.e(29)]).then(r.bind(null,318)),"components/NavLink":()=>r.e(45).then(r.bind(null,286)),"components/NavLinks":()=>Promise.all([r.e(0),r.e(24)]).then(r.bind(null,304)),"components/Navbar":()=>Promise.all([r.e(0),r.e(1)]).then(r.bind(null,421)),"components/Page":()=>Promise.all([r.e(0),r.e(34)]).then(r.bind(null,319)),"components/Sidebar":()=>Promise.all([r.e(0),r.e(22)]).then(r.bind(null,320)),"components/SidebarButton":()=>Promise.all([r.e(0),r.e(40)]).then(r.bind(null,321)),"components/SidebarGroup":()=>Promise.all([r.e(0),r.e(3)]).then(r.bind(null,305)),"components/SidebarLink":()=>Promise.all([r.e(0),r.e(35)]).then(r.bind(null,297)),"components/SidebarLinks":()=>Promise.all([r.e(0),r.e(3)]).then(r.bind(null,295)),"global-components/Badge":()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,430)),"layouts/404":()=>r.e(5).then(r.bind(null,425)),"layouts/Layout":()=>Promise.all([r.e(0),r.e(1),r.e(2)]).then(r.bind(null,426)),NotFound:()=>r.e(5).then(r.bind(null,425)),Layout:()=>Promise.all([r.e(0),r.e(1),r.e(2)]).then(r.bind(null,426))},Gu={"v-07f576f6":()=>r.e(54).then(r.bind(null,431)),"v-55ea2f06":()=>r.e(55).then(r.bind(null,432)),"v-71235e06":()=>r.e(41).then(r.bind(null,433)),"v-9a956228":()=>r.e(30).then(r.bind(null,434)),"v-935ace04":()=>r.e(28).then(r.bind(null,435)),"v-c7f0409c":()=>r.e(46).then(r.bind(null,436)),"v-3d85f24e":()=>r.e(47).then(r.bind(null,437)),"v-7458dcb4":()=>r.e(42).then(r.bind(null,438)),"v-c24b02f4":()=>r.e(43).then(r.bind(null,439)),"v-13b45cbc":()=>r.e(36).then(r.bind(null,440)),"v-085c52d5":()=>r.e(56).then(r.bind(null,441)),"v-77b18c66":()=>r.e(23).then(r.bind(null,442)),"v-77ecefa4":()=>r.e(26).then(r.bind(null,443)),"v-7f8ace16":()=>r.e(27).then(r.bind(null,444)),"v-5dc20574":()=>r.e(44).then(r.bind(null,445)),"v-0578da5e":()=>r.e(57).then(r.bind(null,446)),"v-6dbdf7a6":()=>r.e(31).then(r.bind(null,447)),"v-e802d5c8":()=>r.e(58).then(r.bind(null,448)),"v-12844fda":()=>r.e(59).then(r.bind(null,449)),"v-cdebead0":()=>r.e(60).then(r.bind(null,450)),"v-1f8fc556":()=>r.e(61).then(r.bind(null,451)),"v-b3d4ffd8":()=>r.e(62).then(r.bind(null,452)),"v-38c220fe":()=>r.e(63).then(r.bind(null,453)),"v-548430c6":()=>r.e(64).then(r.bind(null,454)),"v-5959fdec":()=>r.e(48).then(r.bind(null,455)),"v-73b54474":()=>r.e(65).then(r.bind(null,456)),"v-41e63074":()=>r.e(32).then(r.bind(null,457)),"v-87b76dc4":()=>r.e(50).then(r.bind(null,458)),"v-4a02acc0":()=>r.e(51).then(r.bind(null,459)),"v-0d6f29f2":()=>r.e(49).then(r.bind(null,460)),"v-a9b07284":()=>r.e(52).then(r.bind(null,461)),"v-739629a6":()=>r.e(66).then(r.bind(null,462)),"v-5f93f1f6":()=>r.e(67).then(r.bind(null,463)),"v-0de8b466":()=>r.e(68).then(r.bind(null,464))};function Xu(e){const t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}const Yu=/-(\w)/g,Qu=Xu(e=>e.replace(Yu,(e,t)=>t?t.toUpperCase():"")),Ju=/\B([A-Z])/g,Zu=Xu(e=>e.replace(Ju,"-$1").toLowerCase()),ef=Xu(e=>e.charAt(0).toUpperCase()+e.slice(1));function tf(e,t){if(!t)return;if(e(t))return e(t);return t.includes("-")?e(ef(Qu(t))):e(ef(t))||e(Zu(t))}const rf=Object.assign({},zu,Gu),nf=e=>rf[e],_f=e=>Gu[e],of=e=>zu[e],uf=e=>Hr.component(e);function ff(e){return tf(_f,e)}function cf(e){return tf(of,e)}function af(e){return tf(nf,e)}function bf(e){return tf(uf,e)}function sf(...e){return Promise.all(e.filter(e=>e).map(async e=>{if(!bf(e)&&af(e)){const t=await af(e)();Hr.component(e,t.default)}}))}function df(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}var pf=r(90),gf=r.n(pf),wf=r(91),xf=r.n(wf),lf={created(){if(this.siteMeta=this.$site.headTags.filter(([e])=>"meta"===e).map(([e,t])=>t),this.$ssrContext){const t=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(e=t)?e.map(e=>{let t="{t+=` ${r}="${xf()(e[r])}"`}),t+">"}).join("\n "):"",this.$ssrContext.canonicalLink=mf(this.$canonicalUrl)}var e},mounted(){this.currentMetaTags=[...document.querySelectorAll("meta")],this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const e=this.getMergedMetaTags();this.currentMetaTags=vf(e,this.currentMetaTags)},getMergedMetaTags(){const e=this.$page.frontmatter.meta||[];return gf()([{name:"description",content:this.$description}],e,this.siteMeta,yf)},updateCanonicalLink(){hf(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",mf(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){vf(null,this.currentMetaTags),hf()}};function hf(){const e=document.querySelector("link[rel='canonical']");e&&e.remove()}function mf(e=""){return e?``:""}function vf(e,t){if(t&&[...t].filter(e=>e.parentNode===document.head).forEach(e=>document.head.removeChild(e)),e)return e.map(e=>{const t=document.createElement("meta");return Object.keys(e).forEach(r=>{t.setAttribute(r,e[r])}),document.head.appendChild(t),t})}function yf(e){for(const t of["name","property","itemprop"])if(e.hasOwnProperty(t))return e[t]+t;return JSON.stringify(e)}var Sf=r(22),Pf=r.n(Sf),Af={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Pf()((function(){this.setActiveHash()}),300),setActiveHash(){const e=[].slice.call(document.querySelectorAll(".sidebar-link")),t=[].slice.call(document.querySelectorAll(".header-anchor")).filter(t=>e.some(e=>e.hash===t.hash)),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),n=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),_=window.innerHeight+r;for(let e=0;e=o.parentElement.offsetTop+10&&(!u||r{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}},Tf=r(23),Ef=r.n(Tf),Df={mounted(){Ef.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,r)=>{e.path===t.path||Hr.component(e.name)||Ef.a.start(),r()}),this.$router.afterEach(()=>{Ef.a.done(),this.isSidebarOpen=!1})}},kf={props:{parent:Object,code:String,options:{align:String,color:String,backgroundTransition:Boolean,backgroundColor:String,successText:String,staticIcon:Boolean}},data:()=>({success:!1,originalBackground:null,originalTransition:null}),computed:{alignStyle(){let e={};return e[this.options.align]="7.5px",e},iconClass(){return this.options.staticIcon?"":"hover"}},mounted(){this.originalTransition=this.parent.style.transition,this.originalBackground=this.parent.style.background},beforeDestroy(){this.parent.style.transition=this.originalTransition,this.parent.style.background=this.originalBackground},methods:{hexToRgb(e){let 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(e){if(navigator.clipboard)navigator.clipboard.writeText(this.code).then(()=>{this.setSuccessTransitions()},()=>{});else{let e=document.createElement("textarea");document.body.appendChild(e),e.value=this.code,e.select(),document.execCommand("Copy"),e.remove(),this.setSuccessTransitions()}},setSuccessTransitions(){if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";let e=this.hexToRgb(this.options.backgroundColor);this.parent.style.background=`rgba(${e.r}, ${e.g}, ${e.b}, 0.1)`}this.success=!0,this.successTimeout=setTimeout(()=>{this.options.backgroundTransition&&(this.parent.style.background=this.originalBackground,this.parent.style.transition=this.originalTransition),this.success=!1},500)}}},If=(r(236),r(7)),Cf=Object(If.a)(kf,(function(){var e=this,t=e._self._c;return t("div",{staticClass:"code-copy"},[t("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}},[t("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),e._v(" "),t("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(" "),t("span",{class:e.success?"success":"",style:e.alignStyle},[e._v("\n "+e._s(e.options.successText)+"\n ")])])}),[],!1,null,"49140617",null).exports,Of=(r(237),[lf,Af,Df,{updated(){this.update()},methods:{update(){setTimeout(()=>{document.querySelectorAll('div[class*="language-"] pre').forEach(e=>{if(e.classList.contains("code-copy-added"))return;let t=new(Hr.extend(Cf));t.options={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)}}}]),Mf={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return df("layout",e),Hr.component(e)}},methods:{getLayout(){if(this.$page.path){const e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},Lf=Object(If.a)(Mf,(function(){return(0,this._self._c)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(e,t,r){switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],r);break;case"mixins":e[t]||(e[t]=[]),e[t].push(...r);break;default:throw new Error("Unknown option name.")}}(Lf,"mixins",Of);const Bf=[{name:"v-07f576f6",path:"/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-07f576f6").then(r)}},{path:"/index.html",redirect:"/"},{name:"v-55ea2f06",path:"/beginner/tutorial1-window/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-55ea2f06").then(r)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-71235e06",path:"/beginner/tutorial2-surface/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-71235e06").then(r)}},{path:"/beginner/tutorial2-surface/index.html",redirect:"/beginner/tutorial2-surface/"},{name:"v-9a956228",path:"/beginner/tutorial4-buffer/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-9a956228").then(r)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-935ace04",path:"/beginner/tutorial5-textures/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-935ace04").then(r)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-c7f0409c",path:"/beginner/tutorial6-uniforms/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-c7f0409c").then(r)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-3d85f24e",path:"/beginner/tutorial7-instancing/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-3d85f24e").then(r)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-7458dcb4",path:"/beginner/tutorial3-pipeline/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-7458dcb4").then(r)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-c24b02f4",path:"/beginner/tutorial8-depth/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-c24b02f4").then(r)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-13b45cbc",path:"/beginner/tutorial9-models/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-13b45cbc").then(r)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-085c52d5",path:"/intermediate/pbr-notes.html",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-085c52d5").then(r)}},{name:"v-77b18c66",path:"/intermediate/tutorial10-lighting/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-77b18c66").then(r)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-77ecefa4",path:"/intermediate/tutorial11-normals/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-77ecefa4").then(r)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-7f8ace16",path:"/intermediate/tutorial13-hdr/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-7f8ace16").then(r)}},{path:"/intermediate/tutorial13-hdr/index.html",redirect:"/intermediate/tutorial13-hdr/"},{name:"v-5dc20574",path:"/intermediate/tutorial12-camera/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-5dc20574").then(r)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-0578da5e",path:"/news/0.12/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-0578da5e").then(r)}},{path:"/news/0.12/index.html",redirect:"/news/0.12/"},{name:"v-6dbdf7a6",path:"/intermediate/wip-terrain/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-6dbdf7a6").then(r)}},{path:"/intermediate/wip-terrain/index.html",redirect:"/intermediate/wip-terrain/"},{name:"v-e802d5c8",path:"/news/0.13/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-e802d5c8").then(r)}},{path:"/news/0.13/index.html",redirect:"/news/0.13/"},{name:"v-12844fda",path:"/news/0.14/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-12844fda").then(r)}},{path:"/news/0.14/index.html",redirect:"/news/0.14/"},{name:"v-cdebead0",path:"/news/0.15/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-cdebead0").then(r)}},{path:"/news/0.15/index.html",redirect:"/news/0.15/"},{name:"v-1f8fc556",path:"/news/0.16/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-1f8fc556").then(r)}},{path:"/news/0.16/index.html",redirect:"/news/0.16/"},{name:"v-b3d4ffd8",path:"/news/0.17/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-b3d4ffd8").then(r)}},{path:"/news/0.17/index.html",redirect:"/news/0.17/"},{name:"v-38c220fe",path:"/news/0.18%20and%20hdr/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-38c220fe").then(r)}},{path:"/news/0.18 and hdr/",redirect:"/news/0.18%20and%20hdr/"},{path:"/news/0.18%20and%20hdr/index.html",redirect:"/news/0.18%20and%20hdr/"},{path:"/news/0.18 and hdr/",redirect:"/news/0.18%20and%20hdr/"},{name:"v-548430c6",path:"/showcase/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-548430c6").then(r)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-5959fdec",path:"/news/pre-0.12/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-5959fdec").then(r)}},{path:"/news/pre-0.12/index.html",redirect:"/news/pre-0.12/"},{name:"v-73b54474",path:"/showcase/alignment/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-73b54474").then(r)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-41e63074",path:"/showcase/compute/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-41e63074").then(r)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-87b76dc4",path:"/showcase/imgui-demo/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-87b76dc4").then(r)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-4a02acc0",path:"/showcase/pong/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-4a02acc0").then(r)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-0d6f29f2",path:"/showcase/gifs/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-0d6f29f2").then(r)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-a9b07284",path:"/showcase/windowless/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-a9b07284").then(r)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-739629a6",path:"/showcase/threading/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-739629a6").then(r)}},{path:"/showcase/threading/index.html",redirect:"/showcase/threading/"},{name:"v-5f93f1f6",path:"/todo.html",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-5f93f1f6").then(r)}},{name:"v-0de8b466",path:"/topics/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-0de8b466").then(r)}},{path:"/topics/index.html",redirect:"/topics/"},{path:"*",component:Lf}],Ff={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",headTags:[],pages:[{title:"Introduction",frontmatter:{},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:"Translations",slug:"translations"},{level:2,title:"Special thanks to these patrons!",slug:"special-thanks-to-these-patrons"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Dependencies and the window",frontmatter:{},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:"Create a new project",slug:"create-a-new-project"},{level:2,title:"The code",slug:"the-code"},{level:2,title:"Added support for the web",slug:"added-support-for-the-web"},{level:2,title:"Web Assembly",slug:"web-assembly"},{level:2,title:"More code",slug:"more-code"},{level:2,title:"Wasm Pack",slug:"wasm-pack"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"The Surface",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Buffers and Indices",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Textures and bind groups",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Uniform buffers and a 3d camera",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Instancing",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"The Pipeline",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"The Depth Buffer",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Model Loading",frontmatter:{},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:"Accessing files from WASM",slug:"accessing-files-from-wasm"},{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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Sources",frontmatter:{},regularPath:"/intermediate/pbr-notes.html",relativePath:"intermediate/pbr-notes.md",key:"v-085c52d5",path:"/intermediate/pbr-notes.html",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Working with Lights",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Normal Mapping",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"High Dynamic Range Rendering",frontmatter:{},regularPath:"/intermediate/tutorial13-hdr/",relativePath:"intermediate/tutorial13-hdr/readme.md",key:"v-7f8ace16",path:"/intermediate/tutorial13-hdr/",headers:[{level:2,title:"What is High Dynamic Range?",slug:"what-is-high-dynamic-range"},{level:2,title:"Switching to HDR",slug:"switching-to-hdr"},{level:2,title:"Tonemapping",slug:"tonemapping"},{level:2,title:"Loading HDR textures",slug:"loading-hdr-textures"},{level:2,title:"Equirectangular textures",slug:"equirectangular-textures"},{level:2,title:"Cube Maps",slug:"cube-maps"},{level:2,title:"Compute shaders",slug:"compute-shaders"},{level:2,title:"The compute shader",slug:"the-compute-shader"},{level:2,title:"Skybox",slug:"skybox"},{level:2,title:"Reflections",slug:"reflections"},{level:2,title:"Demo",slug:"demo"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"A Better Camera",frontmatter:{},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 lib.rs",slug:"cleaning-up-lib-rs"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Update to 0.12!",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Procedural Terrain",frontmatter:{},regularPath:"/intermediate/wip-terrain/",relativePath:"intermediate/wip-terrain/README.md",key:"v-6dbdf7a6",path:"/intermediate/wip-terrain/",headers:[{level:2,title:"Compute Shaders",slug:"compute-shaders"},{level:2,title:"Noise Functions",slug:"noise-functions"},{level:2,title:"Generating the mesh",slug:"generating-the-mesh"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Update to 0.13!",frontmatter:{},regularPath:"/news/0.13/",relativePath:"news/0.13/readme.md",key:"v-e802d5c8",path:"/news/0.13/",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Update to 0.14!",frontmatter:{},regularPath:"/news/0.14/",relativePath:"news/0.14/readme.md",key:"v-12844fda",path:"/news/0.14/",headers:[{level:2,title:"SurfaceConfiguration changes",slug:"surfaceconfiguration-changes"},{level:2,title:"Winit updated",slug:"winit-updated"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Update to 0.15!",frontmatter:{},regularPath:"/news/0.15/",relativePath:"news/0.15/readme.md",key:"v-cdebead0",path:"/news/0.15/",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Update to 0.16",frontmatter:{},regularPath:"/news/0.16/",relativePath:"news/0.16/readme.md",key:"v-1f8fc556",path:"/news/0.16/",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Update to 0.17",frontmatter:{},regularPath:"/news/0.17/",relativePath:"news/0.17/readme.md",key:"v-b3d4ffd8",path:"/news/0.17/",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Update to 0.18 and HDR tutorial",frontmatter:{},regularPath:"/news/0.18%20and%20hdr/",relativePath:"news/0.18 and hdr/readme.md",key:"v-38c220fe",path:"/news/0.18%20and%20hdr/",headers:[{level:2,title:"HDR tutorial",slug:"hdr-tutorial"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Foreword",frontmatter:{},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-548430c6",path:"/showcase/",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"News (Pre 0.12)",frontmatter:{},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 due to not specifying the correct usage",slug:"fixed-panics-due-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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Memory Layout in WGSL",frontmatter:{},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"},{level:2,title:"Additional resources",slug:"additional-resources"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Compute Example: Tangents and Bitangents",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Basic Imgui Demo",frontmatter:{},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-87b76dc4",path:"/showcase/imgui-demo/",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Pong",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Creating gifs",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Wgpu without a window",frontmatter:{},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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{},regularPath:"/showcase/threading/",relativePath:"showcase/threading/README.md",key:"v-739629a6",path:"/showcase/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/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Coming Soon!",frontmatter:{},regularPath:"/todo.html",relativePath:"todo.md",key:"v-5f93f1f6",path:"/todo.html",lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3},{title:"Topics Covered",frontmatter:{},regularPath:"/topics/",relativePath:"topics/readme.md",key:"v-0de8b466",path:"/topics/",headers:[{level:2,title:"Basics",slug:"basics"},{level:2,title:"Lighting",slug:"lighting"},{level:2,title:"Misc",slug:"misc"}],lastUpdated:"12/27/2023, 9:52:25 PM",lastUpdatedTimestamp:1703713945e3}],themeConfig:{domain:"/learn-wgpu",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-hdr/"]},{title:"Showcase",collapsable:!0,children:["/showcase/","/showcase/windowless/","/showcase/gifs/","/showcase/pong/","/showcase/compute/","/showcase/alignment/"]},{title:"News",collapsable:!0,children:["/news/0.18 and hdr/","/news/0.17/","/news/0.16/","/news/0.15/","/news/0.14/","/news/0.13/","/news/0.12/","/news/pre-0.12/"]}]}};r(238);Hr.component("AutoGithubLink",()=>Promise.all([r.e(0),r.e(37)]).then(r.bind(null,427))),Hr.component("RecentArticles",()=>r.e(53).then(r.bind(null,428))),Hr.component("WasmExample",()=>Promise.all([r.e(0),r.e(33)]).then(r.bind(null,429))),Hr.component("Badge",()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,430)));r(239);var Rf={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:()=>({scrollTop:null}),computed:{show(){return this.scrollTop>this.threshold}},mounted(){this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Pf()(()=>{this.scrollTop=this.getScrollTop()},100))},methods:{getScrollTop:()=>window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,scrollToTop(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},jf=(r(240),Object(If.a)(Rf,(function(){var e=this._self._c;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5fd4ef0c",null).exports),$f=[{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:e})=>{e.component("CodeCopy",Cf)},({Vue:e})=>{e.component("BackToTop",jf)}],Uf=["BackToTop"];class Vf extends class{constructor(){this.store=new Hr({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){Hr.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(Vf.prototype,{getPageAsyncComponent:ff,getLayoutAsyncComponent:cf,getAsyncComponent:af,getVueComponent:bf});var Nf={install(e){const t=new Vf;e.$vuepress=t,e.prototype.$vuepress=t}};function qf(e,t){const r=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===r)}var Wf={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return df("pageKey",t),Hr.component(t)||Hr.component(t,ff(t)),Hr.component(t)?e(t):e("")}},Kf={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:r})=>e("div",{class:["content__"+t.slotKey]},r()[t.slotKey])},Hf={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},zf=(r(241),r(242),Object(If.a)(Hf,(function(){var e=this._self._c;return e("span",[e("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[e("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"}}),this._v(" "),e("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"}})]),this._v(" "),e("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Gf={functional:!0,render(e,{parent:t,children:r}){if(t._isMounted)return r;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};Hr.config.productionTip=!1,Hr.use(Ku),Hr.use(Nf),Hr.mixin(function(e,t,r=Hr){!function(e){e.locales&&Object.keys(e.locales).forEach(t=>{e.locales[t].path=t});Object.freeze(e)}(t),r.$vuepress.$set("siteData",t);const n=new(e(r.$vuepress.$get("siteData"))),_=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(n)),o={};return Object.keys(_).reduce((e,t)=>(t.startsWith("$")&&(e[t]=_[t].get),e),o),{computed:o}}(e=>class{setPage(e){this.__page=e}get $site(){return e}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:e={}}=this.$site;let t,r;for(const n in e)"/"===n?r=e[n]:0===this.$page.path.indexOf(n)&&(t=e[n]);return t||r||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:e}=this.$page.frontmatter;return"string"==typeof e&&e}get $title(){const e=this.$page,{metaTitle:t}=this.$page.frontmatter;if("string"==typeof t)return t;const r=this.$siteTitle,n=e.frontmatter.home?null:e.frontmatter.title||e.title;return r?n?n+" | "+r:r:n||"VuePress"}get $description(){const e=function(e){if(e){const t=e.filter(e=>"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||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(e,t){for(let r=0;rr||(e.hash?!Hr.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,r,n)=>{if(qf(e,t.path))n();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const r=t.path.replace(/\/$/,"")+".html";qf(e,r)?n(r):n()}else n();else{const r=t.path+"/",_=t.path+".html";qf(e,_)?n(_):qf(e,r)?n(r):n()}})}(r);const n={};try{await Promise.all($f.filter(e=>"function"==typeof e).map(t=>t({Vue:Hr,options:n,router:r,siteData:Ff,isServer:e})))}catch(e){console.error(e)}return{app:new Hr(Object.assign(n,{router:r,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},Uf.map(t=>e(t)))])})),router:r}}(!1).then(({app:e,router:t})=>{t.onReady(()=>{e.$mount("#app")})})}]); \ No newline at end of file diff --git a/assets/js/app.d7475ed3.js b/assets/js/app.d7475ed3.js new file mode 100644 index 00000000..458cf396 --- /dev/null +++ b/assets/js/app.d7475ed3.js @@ -0,0 +1,16 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var n,u,f=t[0],c=t[1],i=t[2],a=0,b=[];a=t||r<0||w&&e-i>=o}function v(){var e=d();if(m(e))return y(e);f=setTimeout(v,function(e){var r=t-(e-c);return w?s(r,o-(e-i)):r}(e))}function y(e){return f=void 0,x&&n?l(e):(n=_=void 0,u)}function S(){var e=d(),r=m(e);if(n=arguments,_=this,c=e,r){if(void 0===f)return h(c);if(w)return f=setTimeout(v,t),l(c)}return void 0===f&&(f=setTimeout(v,t)),u}return t=g(t)||0,p(r)&&(a=!!r.leading,o=(w="maxWait"in r)?b(g(r.maxWait)||0,t):o,x="trailing"in r?!!r.trailing:x),S.cancel=function(){void 0!==f&&clearTimeout(f),i=0,n=c=_=f=void 0},S.flush=function(){return void 0===f?u:y(d())},S}},function(e,t,r){var n,_; +/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress + * @license MIT */void 0===(_="function"==typeof(n=function(){var e,t,r={version:"0.2.0"},n=r.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:'
'};function _(e,t,r){return er?r:e}function o(e){return 100*(-1+e)}r.configure=function(e){var t,r;for(t in e)void 0!==(r=e[t])&&e.hasOwnProperty(t)&&(n[t]=r);return this},r.status=null,r.set=function(e){var t=r.isStarted();e=_(e,n.minimum,1),r.status=1===e?null:e;var c=r.render(!t),i=c.querySelector(n.barSelector),a=n.speed,b=n.easing;return c.offsetWidth,u((function(t){""===n.positionUsing&&(n.positionUsing=r.getPositioningCSS()),f(i,function(e,t,r){var _;return(_="translate3d"===n.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===n.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+r,_}(e,a,b)),1===e?(f(c,{transition:"none",opacity:1}),c.offsetWidth,setTimeout((function(){f(c,{transition:"all "+a+"ms linear",opacity:0}),setTimeout((function(){r.remove(),t()}),a)}),a)):setTimeout(t,a)})),this},r.isStarted=function(){return"number"==typeof r.status},r.start=function(){r.status||r.set(0);var e=function(){setTimeout((function(){r.status&&(r.trickle(),e())}),n.trickleSpeed)};return n.trickle&&e(),this},r.done=function(e){return e||r.status?r.inc(.3+.5*Math.random()).set(1):this},r.inc=function(e){var t=r.status;return t?("number"!=typeof e&&(e=(1-t)*_(Math.random()*t,.1,.95)),t=_(t+e,0,.994),r.set(t)):r.start()},r.trickle=function(){return r.inc(Math.random()*n.trickleRate)},e=0,t=0,r.promise=function(n){return n&&"resolved"!==n.state()?(0===t&&r.start(),e++,t++,n.always((function(){0==--t?(e=0,r.done()):r.set((e-t)/e)})),this):this},r.render=function(e){if(r.isRendered())return document.getElementById("nprogress");i(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=n.template;var _,u=t.querySelector(n.barSelector),c=e?"-100":o(r.status||0),a=document.querySelector(n.parent);return f(u,{transition:"all 0 linear",transform:"translate3d("+c+"%,0,0)"}),n.showSpinner||(_=t.querySelector(n.spinnerSelector))&&s(_),a!=document.body&&i(a,"nprogress-custom-parent"),a.appendChild(t),t},r.remove=function(){a(document.documentElement,"nprogress-busy"),a(document.querySelector(n.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&s(e)},r.isRendered=function(){return!!document.getElementById("nprogress")},r.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 u=function(){var e=[];function t(){var r=e.shift();r&&r(t)}return function(r){e.push(r),1==e.length&&t()}}(),f=function(){var e=["Webkit","O","Moz","ms"],t={};function r(r){return r=r.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()})),t[r]||(t[r]=function(t){var r=document.body.style;if(t in r)return t;for(var n,_=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);_--;)if((n=e[_]+o)in r)return n;return t}(r))}function n(e,t,n){t=r(t),e.style[t]=n}return function(e,t){var r,_,o=arguments;if(2==o.length)for(r in t)void 0!==(_=t[r])&&t.hasOwnProperty(r)&&n(e,r,_);else n(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:b(e)).indexOf(" "+t+" ")>=0}function i(e,t){var r=b(e),n=r+t;c(r,t)||(e.className=n.substring(1))}function a(e,t){var r,n=b(e);c(e,t)&&(r=n.replace(" "+t+" "," "),e.className=r.substring(1,r.length-1))}function b(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function s(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return r})?n.call(t,r,t,e):n)||(e.exports=_)},function(e,t,r){"use strict";var n=r(118);e.exports=function(e){return n(e.length)}},function(e,t,r){"use strict";var n=r(52),_=Object;e.exports=function(e){return _(n(e))}},function(e,t,r){"use strict";var n=r(0),_=r(51).f,o=r(12),u=r(95),f=r(35),c=r(63),i=r(121);e.exports=function(e,t){var r,a,b,s,d,p=e.target,g=e.global,w=e.stat;if(r=g?n:w?n[p]||f(p,{}):(n[p]||{}).prototype)for(a in t){if(s=t[a],b=e.dontCallGetSet?(d=_(r,a))&&d.value:r[a],!i(g?a:p+(w?".":"#")+a,e.forced)&&void 0!==b){if(typeof s==typeof b)continue;c(s,b)}(e.sham||b&&b.sham)&&o(s,"sham",!0),u(r,a,s,e)}}},function(e,t,r){"use strict";var n=r(1),_=r(94),o=TypeError;e.exports=function(e){if(n(e))return e;throw new o(_(e)+" is not a function")}},function(e,t,r){"use strict";var n=r(0),_=r(59),o=r(8),u=r(49),f=r(57),c=r(56),i=n.Symbol,a=_("wks"),b=c?i.for||i:i&&i.withoutSetter||u;e.exports=function(e){return o(a,e)||(a[e]=f&&o(i,e)?i[e]:b("Symbol."+e)),a[e]}},function(e,t,r){"use strict";var n=r(30),_=Function.prototype.call;e.exports=n?_.bind(_):function(){return _.apply(_,arguments)}},function(e,t,r){"use strict";var n=r(2);e.exports=!n((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,r){"use strict";e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,r){"use strict";var n=r(47),_=r(52);e.exports=function(e){return n(_(e))}},function(e,t,r){"use strict";var n=r(0),_=r(1),o=function(e){return _(e)?e:void 0};e.exports=function(e,t){return arguments.length<2?o(n[e]):n[e]&&n[e][t]}},function(e,t,r){"use strict";var n=r(0),_=r(35),o=n["__core-js_shared__"]||_("__core-js_shared__",{});e.exports=o},function(e,t,r){"use strict";var n=r(0),_=Object.defineProperty;e.exports=function(e,t){try{_(n,e,{value:t,configurable:!0,writable:!0})}catch(r){n[e]=t}return t}},function(e,t,r){"use strict";var n=r(9),_=String,o=TypeError;e.exports=function(e){if(n(e))return e;throw new o(_(e)+" is not an object")}},function(e,t,r){var n=r(144),_=r(11),o=Object.prototype,u=o.hasOwnProperty,f=o.propertyIsEnumerable,c=n(function(){return arguments}())?n:function(e){return _(e)&&u.call(e,"callee")&&!f.call(e,"callee")};e.exports=c},function(e,t,r){var n=r(10)(r(5),"Map");e.exports=n},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},function(e,t,r){var n=r(164),_=r(171),o=r(173),u=r(174),f=r(175);function c(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t-1&&e%1==0&&e<=9007199254740991}},function(e,t,r){var n=r(6),_=r(44),o=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,u=/^\w*$/;e.exports=function(e,t){if(n(e))return!1;var r=typeof e;return!("number"!=r&&"symbol"!=r&&"boolean"!=r&&null!=e&&!_(e))||(u.test(e)||!o.test(e)||null!=t&&e in Object(t))}},function(e,t,r){var n=r(14),_=r(11);e.exports=function(e){return"symbol"==typeof e||_(e)&&"[object Symbol]"==n(e)}},function(e,t){e.exports=function(e){return e}},function(e,t,r){"use strict";var n=r(117);e.exports=function(e){var t=+e;return t!=t||0===t?0:n(t)}},function(e,t,r){"use strict";var n=r(3),_=r(2),o=r(16),u=Object,f=n("".split);e.exports=_((function(){return!u("z").propertyIsEnumerable(0)}))?function(e){return"String"===o(e)?f(e,""):u(e)}:u},function(e,t,r){"use strict";var n=r(3);e.exports=n({}.isPrototypeOf)},function(e,t,r){"use strict";var n=r(3),_=0,o=Math.random(),u=n(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+u(++_+o,36)}},function(e,t,r){"use strict";var n=r(130),_=r(36),o=r(131);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,r={};try{(e=n(Object.prototype,"__proto__","set"))(r,[]),t=r instanceof Array}catch(e){}return function(r,n){return _(r),o(n),t?e(r,n):r.__proto__=n,r}}():void 0)},function(e,t,r){"use strict";var n=r(4),_=r(29),o=r(103),u=r(31),f=r(32),c=r(54),i=r(8),a=r(61),b=Object.getOwnPropertyDescriptor;t.f=n?b:function(e,t){if(e=f(e),t=c(t),a)try{return b(e,t)}catch(e){}if(i(e,t))return u(!_(o.f,e,t),e[t])}},function(e,t,r){"use strict";var n=r(53),_=TypeError;e.exports=function(e){if(n(e))throw new _("Can't call method on "+e);return e}},function(e,t,r){"use strict";e.exports=function(e){return null==e}},function(e,t,r){"use strict";var n=r(93),_=r(55);e.exports=function(e){var t=n(e,"string");return _(t)?t:t+""}},function(e,t,r){"use strict";var n=r(33),_=r(1),o=r(48),u=r(56),f=Object;e.exports=u?function(e){return"symbol"==typeof e}:function(e){var t=n("Symbol");return _(t)&&o(t.prototype,f(e))}},function(e,t,r){"use strict";var n=r(57);e.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(e,t,r){"use strict";var n=r(58),_=r(2),o=r(0).String;e.exports=!!Object.getOwnPropertySymbols&&!_((function(){var e=Symbol("symbol detection");return!o(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},function(e,t,r){"use strict";var n,_,o=r(0),u=r(104),f=o.process,c=o.Deno,i=f&&f.versions||c&&c.version,a=i&&i.v8;a&&(_=(n=a.split("."))[0]>0&&n[0]<4?1:+(n[0]+n[1])),!_&&u&&(!(n=u.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=u.match(/Chrome\/(\d+)/))&&(_=+n[1]),e.exports=_},function(e,t,r){"use strict";var n=r(60),_=r(34);(e.exports=function(e,t){return _[e]||(_[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.35.0",mode:n?"pure":"global",copyright:"© 2014-2023 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.35.0/LICENSE",source:"https://github.com/zloirock/core-js"})},function(e,t,r){"use strict";e.exports=!1},function(e,t,r){"use strict";var n=r(4),_=r(2),o=r(107);e.exports=!n&&!_((function(){return 7!==Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},function(e,t,r){"use strict";e.exports={}},function(e,t,r){"use strict";var n=r(8),_=r(112),o=r(51),u=r(15);e.exports=function(e,t,r){for(var f=_(t),c=u.f,i=o.f,a=0;aa))return!1;var s=c.get(e),d=c.get(t);if(s&&d)return s==t&&d==e;var p=-1,g=!0,w=2&r?new n:void 0;for(c.set(e,t),c.set(t,e);++p-1&&e%1==0&&e]/;e.exports=function(e){var t,r=""+e,_=n.exec(r);if(!_)return r;var o="",u=0,f=0;for(u=_.index;u79&&u<83||!o("reduce")},{reduce:function(e){var t=arguments.length;return _(this,e,t,t>1?arguments[1]:void 0)}})},function(e,t,r){"use strict";var n={}.propertyIsEnumerable,_=Object.getOwnPropertyDescriptor,o=_&&!n.call({1:2},1);t.f=o?function(e){var t=_(this,e);return!!t&&t.enumerable}:n},function(e,t,r){"use strict";e.exports="undefined"!=typeof navigator&&String(navigator.userAgent)||""},function(e,t,r){"use strict";var n=r(27),_=r(53);e.exports=function(e,t){var r=e[t];return _(r)?void 0:n(r)}},function(e,t,r){"use strict";var n=r(29),_=r(1),o=r(9),u=TypeError;e.exports=function(e,t){var r,f;if("string"===t&&_(r=e.toString)&&!o(f=n(r,e)))return f;if(_(r=e.valueOf)&&!o(f=n(r,e)))return f;if("string"!==t&&_(r=e.toString)&&!o(f=n(r,e)))return f;throw new u("Can't convert object to primitive value")}},function(e,t,r){"use strict";var n=r(0),_=r(9),o=n.document,u=_(o)&&_(o.createElement);e.exports=function(e){return u?o.createElement(e):{}}},function(e,t,r){"use strict";var n=r(4),_=r(2);e.exports=n&&_((function(){return 42!==Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},function(e,t,r){"use strict";var n=r(4),_=r(8),o=Function.prototype,u=n&&Object.getOwnPropertyDescriptor,f=_(o,"name"),c=f&&"something"===function(){}.name,i=f&&(!n||n&&u(o,"name").configurable);e.exports={EXISTS:f,PROPER:c,CONFIGURABLE:i}},function(e,t,r){"use strict";var n=r(3),_=r(1),o=r(34),u=n(Function.toString);_(o.inspectSource)||(o.inspectSource=function(e){return u(e)}),e.exports=o.inspectSource},function(e,t,r){"use strict";var n=r(0),_=r(1),o=n.WeakMap;e.exports=_(o)&&/native code/.test(String(o))},function(e,t,r){"use strict";var n=r(33),_=r(3),o=r(113),u=r(120),f=r(36),c=_([].concat);e.exports=n("Reflect","ownKeys")||function(e){var t=o.f(f(e)),r=u.f;return r?c(t,r(e)):t}},function(e,t,r){"use strict";var n=r(114),_=r(119).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,_)}},function(e,t,r){"use strict";var n=r(3),_=r(8),o=r(32),u=r(115).indexOf,f=r(62),c=n([].push);e.exports=function(e,t){var r,n=o(e),i=0,a=[];for(r in n)!_(f,r)&&_(n,r)&&c(a,r);for(;t.length>i;)_(n,r=t[i++])&&(~u(a,r)||c(a,r));return a}},function(e,t,r){"use strict";var n=r(32),_=r(116),o=r(24),u=function(e){return function(t,r,u){var f,c=n(t),i=o(c),a=_(u,i);if(e&&r!=r){for(;i>a;)if((f=c[a++])!=f)return!0}else for(;i>a;a++)if((e||a in c)&&c[a]===r)return e||a||0;return!e&&-1}};e.exports={includes:u(!0),indexOf:u(!1)}},function(e,t,r){"use strict";var n=r(46),_=Math.max,o=Math.min;e.exports=function(e,t){var r=n(e);return r<0?_(r+t,0):o(r,t)}},function(e,t,r){"use strict";var n=Math.ceil,_=Math.floor;e.exports=Math.trunc||function(e){var t=+e;return(t>0?_:n)(t)}},function(e,t,r){"use strict";var n=r(46),_=Math.min;e.exports=function(e){return e>0?_(n(e),9007199254740991):0}},function(e,t,r){"use strict";e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,r){"use strict";t.f=Object.getOwnPropertySymbols},function(e,t,r){"use strict";var n=r(2),_=r(1),o=/#|\.prototype\./,u=function(e,t){var r=c[f(e)];return r===a||r!==i&&(_(t)?n(t):!!t)},f=u.normalize=function(e){return String(e).replace(o,".").toLowerCase()},c=u.data={},i=u.NATIVE="N",a=u.POLYFILL="P";e.exports=u},function(e,t,r){"use strict";var n=r(27),_=r(25),o=r(47),u=r(24),f=TypeError,c=function(e){return function(t,r,c,i){var a=_(t),b=o(a),s=u(a);n(r);var d=e?s-1:0,p=e?-1:1;if(c<2)for(;;){if(d in b){i=b[d],d+=p;break}if(d+=p,e?d<0:s<=d)throw new f("Reduce of empty array with no initial value")}for(;e?d>=0:s>d;d+=p)d in b&&(i=r(i,b[d],d,a));return i}};e.exports={left:c(!1),right:c(!0)}},function(e,t,r){"use strict";var n=r(2);e.exports=function(e,t){var r=[][e];return!!r&&n((function(){r.call(null,t||function(){return 1},1)}))}},function(e,t,r){"use strict";var n=r(0),_=r(16);e.exports="process"===_(n.process)},function(e,t,r){"use strict";var n=r(4),_=r(126),o=TypeError,u=Object.getOwnPropertyDescriptor,f=n&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(e){return e instanceof TypeError}}();e.exports=f?function(e,t){if(_(e)&&!u(e,"length").writable)throw new o("Cannot set read only .length");return e.length=t}:function(e,t){return e.length=t}},function(e,t,r){"use strict";var n=r(16);e.exports=Array.isArray||function(e){return"Array"===n(e)}},function(e,t,r){"use strict";var n=TypeError;e.exports=function(e){if(e>9007199254740991)throw n("Maximum allowed index exceeded");return e}},function(e,t,r){"use strict";var n=r(30),_=Function.prototype,o=_.apply,u=_.call;e.exports="object"==typeof Reflect&&Reflect.apply||(n?u.bind(o):function(){return u.apply(o,arguments)})},function(e,t,r){"use strict";var n=r(33),_=r(8),o=r(12),u=r(48),f=r(50),c=r(63),i=r(133),a=r(134),b=r(135),s=r(138),d=r(139),p=r(4),g=r(60);e.exports=function(e,t,r,w){var x=w?2:1,l=e.split("."),h=l[l.length-1],m=n.apply(null,l);if(m){var v=m.prototype;if(!g&&_(v,"cause")&&delete v.cause,!r)return m;var y=n("Error"),S=t((function(e,t){var r=b(w?t:e,void 0),n=w?new m(e):new m;return void 0!==r&&o(n,"message",r),d(n,S,n.stack,2),this&&u(v,this)&&a(n,this,S),arguments.length>x&&s(n,arguments[x]),n}));if(S.prototype=v,"Error"!==h?f?f(S,y):c(S,y,{name:!0}):p&&"stackTraceLimit"in m&&(i(S,m,"stackTraceLimit"),i(S,m,"prepareStackTrace")),c(S,m),!g)try{v.name!==h&&o(v,"name",h),v.constructor=S}catch(e){}return S}}},function(e,t,r){"use strict";var n=r(3),_=r(27);e.exports=function(e,t,r){try{return n(_(Object.getOwnPropertyDescriptor(e,t)[r]))}catch(e){}}},function(e,t,r){"use strict";var n=r(132),_=String,o=TypeError;e.exports=function(e){if(n(e))return e;throw new o("Can't set "+_(e)+" as a prototype")}},function(e,t,r){"use strict";var n=r(9);e.exports=function(e){return n(e)||null===e}},function(e,t,r){"use strict";var n=r(15).f;e.exports=function(e,t,r){r in e||n(e,r,{configurable:!0,get:function(){return t[r]},set:function(e){t[r]=e}})}},function(e,t,r){"use strict";var n=r(1),_=r(9),o=r(50);e.exports=function(e,t,r){var u,f;return o&&n(u=t.constructor)&&u!==r&&_(f=u.prototype)&&f!==r.prototype&&o(e,f),e}},function(e,t,r){"use strict";var n=r(136);e.exports=function(e,t){return void 0===e?arguments.length<2?"":t:n(e)}},function(e,t,r){"use strict";var n=r(91),_=String;e.exports=function(e){if("Symbol"===n(e))throw new TypeError("Cannot convert a Symbol value to a string");return _(e)}},function(e,t,r){"use strict";var n={};n[r(28)("toStringTag")]="z",e.exports="[object z]"===String(n)},function(e,t,r){"use strict";var n=r(9),_=r(12);e.exports=function(e,t){n(t)&&"cause"in t&&_(e,"cause",t.cause)}},function(e,t,r){"use strict";var n=r(12),_=r(140),o=r(141),u=Error.captureStackTrace;e.exports=function(e,t,r,f){o&&(u?u(e,t):n(e,"stack",_(r,f)))}},function(e,t,r){"use strict";var n=r(3),_=Error,o=n("".replace),u=String(new _("zxcasd").stack),f=/\n\s*at [^:]*:[^\n]*/,c=f.test(u);e.exports=function(e,t){if(c&&"string"==typeof e&&!_.prepareStackTrace)for(;t--;)e=o(e,f,"");return e}},function(e,t,r){"use strict";var n=r(2),_=r(31);e.exports=!n((function(){var e=new Error("a");return!("stack"in e)||(Object.defineProperty(e,"stack",_(1,7)),7!==e.stack)}))},function(e,t,r){var n=r(64),_=r(143);e.exports=function e(t,r,o,u,f){var c=-1,i=t.length;for(o||(o=_),f||(f=[]);++c0&&o(a)?r>1?e(a,r-1,o,u,f):n(f,a):u||(f[f.length]=a)}return f}},function(e,t,r){var n=r(13),_=r(37),o=r(6),u=n?n.isConcatSpreadable:void 0;e.exports=function(e){return o(e)||_(e)||!!(u&&e&&e[u])}},function(e,t,r){var n=r(14),_=r(11);e.exports=function(e){return _(e)&&"[object Arguments]"==n(e)}},function(e,t,r){var n=r(13),_=Object.prototype,o=_.hasOwnProperty,u=_.toString,f=n?n.toStringTag:void 0;e.exports=function(e){var t=o.call(e,f),r=e[f];try{e[f]=void 0;var n=!0}catch(e){}var _=u.call(e);return n&&(t?e[f]=r:delete e[f]),_}},function(e,t){var r=Object.prototype.toString;e.exports=function(e){return r.call(e)}},function(e,t,r){var n=r(148),_=r(204),o=r(45),u=r(6),f=r(214);e.exports=function(e){return"function"==typeof e?e:null==e?o:"object"==typeof e?u(e)?_(e[0],e[1]):n(e):f(e)}},function(e,t,r){var n=r(149),_=r(203),o=r(82);e.exports=function(e){var t=_(e);return 1==t.length&&t[0][2]?o(t[0][0],t[0][1]):function(r){return r===e||n(r,e,t)}}},function(e,t,r){var n=r(66),_=r(70);e.exports=function(e,t,r,o){var u=r.length,f=u,c=!o;if(null==e)return!f;for(e=Object(e);u--;){var i=r[u];if(c&&i[2]?i[1]!==e[i[0]]:!(i[0]in e))return!1}for(;++u-1}},function(e,t,r){var n=r(18);e.exports=function(e,t){var r=this.__data__,_=n(r,e);return _<0?(++this.size,r.push([e,t])):r[_][1]=t,this}},function(e,t,r){var n=r(17);e.exports=function(){this.__data__=new n,this.size=0}},function(e,t){e.exports=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r}},function(e,t){e.exports=function(e){return this.__data__.get(e)}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t,r){var n=r(17),_=r(38),o=r(40);e.exports=function(e,t){var r=this.__data__;if(r instanceof n){var u=r.__data__;if(!_||u.length<199)return u.push([e,t]),this.size=++r.size,this;r=this.__data__=new o(u)}return r.set(e,t),this.size=r.size,this}},function(e,t,r){var n=r(68),_=r(161),o=r(39),u=r(69),f=/^\[object .+?Constructor\]$/,c=Function.prototype,i=Object.prototype,a=c.toString,b=i.hasOwnProperty,s=RegExp("^"+a.call(b).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");e.exports=function(e){return!(!o(e)||_(e))&&(n(e)?s:f).test(u(e))}},function(e,t,r){var n,_=r(162),o=(n=/[^.]+$/.exec(_&&_.keys&&_.keys.IE_PROTO||""))?"Symbol(src)_1."+n:"";e.exports=function(e){return!!o&&o in e}},function(e,t,r){var n=r(5)["__core-js_shared__"];e.exports=n},function(e,t){e.exports=function(e,t){return null==e?void 0:e[t]}},function(e,t,r){var n=r(165),_=r(17),o=r(38);e.exports=function(){this.size=0,this.__data__={hash:new n,map:new(o||_),string:new n}}},function(e,t,r){var n=r(166),_=r(167),o=r(168),u=r(169),f=r(170);function c(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t0){if(++t>=800)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}},function(e,t,r){var n=r(72),_=r(226),o=r(231),u=r(73),f=r(232),c=r(41);e.exports=function(e,t,r){var i=-1,a=_,b=e.length,s=!0,d=[],p=d;if(r)s=!1,a=o;else if(b>=200){var g=t?null:f(e);if(g)return c(g);s=!1,a=u,p=new n}else p=t?[]:d;e:for(;++i-1}},function(e,t,r){var n=r(228),_=r(229),o=r(230);e.exports=function(e,t,r){return t==t?o(e,t,r):n(e,_,r)}},function(e,t){e.exports=function(e,t,r,n){for(var _=e.length,o=r+(n?1:-1);n?o--:++o<_;)if(t(e[o],o,e))return o;return-1}},function(e,t){e.exports=function(e){return e!=e}},function(e,t){e.exports=function(e,t,r){for(var n=r-1,_=e.length;++n<_;)if(e[n]===t)return n;return-1}},function(e,t){e.exports=function(e,t,r){for(var n=-1,_=null==e?0:e.length;++n<_;)if(r(t,e[n]))return!0;return!1}},function(e,t,r){var n=r(80),_=r(233),o=r(41),u=n&&1/o(new n([,-0]))[1]==1/0?function(e){return new n(e)}:_;e.exports=u},function(e,t){e.exports=function(){}},function(e,t,r){var n=r(79),_=r(11);e.exports=function(e){return _(e)&&n(e)}},function(e,t){e.exports=function(e){var t=null==e?0:e.length;return t?e[t-1]:void 0}},function(e,t,r){"use strict";r(85)},function(e,t,r){},function(e,t,r){},function(e,t,r){},function(e,t,r){"use strict";r(86)},function(e,t,r){"use strict";r(87)},function(e,t,r){"use strict";r(88)},function(e,t,r){"use strict";r.r(t); +/*! + * Vue.js v2.7.16 + * (c) 2014-2023 Evan You + * Released under the MIT License. + */ +var n=Object.freeze({}),_=Array.isArray;function o(e){return null==e}function u(e){return null!=e}function f(e){return!0===e}function c(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function i(e){return"function"==typeof e}function a(e){return null!==e&&"object"==typeof e}var b=Object.prototype.toString;function s(e){return"[object Object]"===b.call(e)}function d(e){return"[object RegExp]"===b.call(e)}function p(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function g(e){return u(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function w(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===b?JSON.stringify(e,x,2):String(e)}function x(e,t){return t&&t.__v_isRef?t.value:t}function l(e){var t=parseFloat(e);return isNaN(t)?e:t}function h(e,t){for(var r=Object.create(null),n=e.split(","),_=0;_-1)return e.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function S(e,t){return y.call(e,t)}function P(e){var t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}var A=/-(\w)/g,T=P((function(e){return e.replace(A,(function(e,t){return t?t.toUpperCase():""}))})),E=P((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),D=/\B([A-Z])/g,k=P((function(e){return e.replace(D,"-$1").toLowerCase()}));var I=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function r(r){var n=arguments.length;return n?n>1?e.apply(t,arguments):e.call(t,r):e.call(t)}return r._length=e.length,r};function C(e,t){t=t||0;for(var r=e.length-t,n=new Array(r);r--;)n[r]=e[r+t];return n}function O(e,t){for(var r in t)e[r]=t[r];return e}function M(e){for(var t={},r=0;r0,Z=Y&&Y.indexOf("edge/")>0;Y&&Y.indexOf("android");var ee=Y&&/iphone|ipad|ipod|ios/.test(Y);Y&&/chrome\/\d+/.test(Y),Y&&/phantomjs/.test(Y);var te,re=Y&&Y.match(/firefox\/(\d+)/),ne={}.watch,_e=!1;if(X)try{var oe={};Object.defineProperty(oe,"passive",{get:function(){_e=!0}}),window.addEventListener("test-passive",null,oe)}catch(e){}var ue=function(){return void 0===te&&(te=!X&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),te},fe=X&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function ce(e){return"function"==typeof e&&/native code/.test(e.toString())}var ie,ae="undefined"!=typeof Symbol&&ce(Symbol)&&"undefined"!=typeof Reflect&&ce(Reflect.ownKeys);ie="undefined"!=typeof Set&&ce(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 be=null;function se(e){void 0===e&&(e=null),e||be&&be._scope.off(),be=e,e&&e._scope.on()}var de=function(){function e(e,t,r,n,_,o,u,f){this.tag=e,this.data=t,this.children=r,this.text=n,this.elm=_,this.ns=void 0,this.context=o,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=u,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=f,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1}return Object.defineProperty(e.prototype,"child",{get:function(){return this.componentInstance},enumerable:!1,configurable:!0}),e}(),pe=function(e){void 0===e&&(e="");var t=new de;return t.text=e,t.isComment=!0,t};function ge(e){return new de(void 0,void 0,void 0,String(e))}function we(e){var t=new de(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}"function"==typeof SuppressedError&&SuppressedError;var xe=0,le=[],he=function(){function e(){this._pending=!1,this.id=xe++,this.subs=[]}return e.prototype.addSub=function(e){this.subs.push(e)},e.prototype.removeSub=function(e){this.subs[this.subs.indexOf(e)]=null,this._pending||(this._pending=!0,le.push(this))},e.prototype.depend=function(t){e.target&&e.target.addDep(this)},e.prototype.notify=function(e){var t=this.subs.filter((function(e){return e}));for(var r=0,n=t.length;r0&&(Ye((i=e(i,"".concat(r||"","_").concat(n)))[0])&&Ye(b)&&(s[a]=ge(b.text+i[0].text),i.shift()),s.push.apply(s,i)):c(i)?Ye(b)?s[a]=ge(b.text+i):""!==i&&s.push(ge(i)):Ye(i)&&Ye(b)?s[a]=ge(b.text+i.text):(f(t._isVList)&&u(i.tag)&&o(i.key)&&u(r)&&(i.key="__vlist".concat(r,"_").concat(n,"__")),s.push(i)));return s}(e):void 0}function Ye(e){return u(e)&&u(e.text)&&!1===e.isComment}function Qe(e,t){var r,n,o,f,c=null;if(_(e)||"string"==typeof e)for(c=new Array(e.length),r=0,n=e.length;r0,f=t?!!t.$stable:!u,c=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(f&&_&&_!==n&&c===_.$key&&!u&&!_.$hasNormal)return _;for(var i in o={},t)t[i]&&"$"!==i[0]&&(o[i]=wt(e,r,i,t[i]))}else o={};for(var a in r)a in o||(o[a]=xt(r,a));return t&&Object.isExtensible(t)&&(t._normalized=o),z(o,"$stable",f),z(o,"$key",c),z(o,"$hasNormal",u),o}function wt(e,t,r,n){var o=function(){var t=be;se(e);var r=arguments.length?n.apply(null,arguments):n({}),o=(r=r&&"object"==typeof r&&!_(r)?[r]:Xe(r))&&r[0];return se(t),r&&(!o||1===r.length&&o.isComment&&!pt(o))?void 0:r};return n.proxy&&Object.defineProperty(t,r,{get:o,enumerable:!0,configurable:!0}),o}function xt(e,t){return function(){return e[t]}}function lt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};z(t,"_v_attr_proxy",!0),ht(t,e.$attrs,n,e,"$attrs")}return e._attrsProxy},get listeners(){e._listenersProxy||ht(e._listenersProxy={},e.$listeners,n,e,"$listeners");return e._listenersProxy},get slots(){return function(e){e._slotsProxy||vt(e._slotsProxy={},e.$scopedSlots);return e._slotsProxy}(e)},emit:I(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(r){return Ue(e,t,r)}))}}}function ht(e,t,r,n,_){var o=!1;for(var u in t)u in e?t[u]!==r[u]&&(o=!0):(o=!0,mt(e,u,n,_));for(var u in e)u in t||(o=!0,delete e[u]);return o}function mt(e,t,r,n){Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return r[n][t]}})}function vt(e,t){for(var r in t)e[r]=t[r];for(var r in e)r in t||delete e[r]}var yt=null;function St(e,t){return(e.__esModule||ae&&"Module"===e[Symbol.toStringTag])&&(e=e.default),a(e)?t.extend(e):e}function Pt(e){if(_(e))for(var t=0;tdocument.createEvent("Event").timeStamp&&(cr=function(){return ir.now()})}var ar=function(e,t){if(e.post){if(!t.post)return 1}else if(t.post)return-1;return e.id-t.id};function br(){var e,t;for(fr=cr(),or=!0,tr.sort(ar),ur=0;urur&&tr[r].id>e.id;)r--;tr.splice(r+1,0,e)}else tr.push(e);_r||(_r=!0,$t(br))}}function dr(e,t){if(e){for(var r=Object.create(null),n=ae?Reflect.ownKeys(e):Object.keys(e),_=0;_-1)if(o&&!S(_,"default"))u=!1;else if(""===u||u===k(e)){var c=Br(String,_.type);(c<0||f-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!d(e)&&e.test(t)}function Yr(e,t){var r=e.cache,n=e.keys,_=e._vnode,o=e.$vnode;for(var u in r){var f=r[u];if(f){var c=f.name;c&&!t(c)&&Qr(r,u,n,_)}}o.componentOptions.children=void 0}function Qr(e,t,r,n){var _=e[t];!_||n&&_.tag===n.tag||_.componentInstance.$destroy(),e[t]=null,v(r,t)}zr.prototype._init=function(e){var t=this;t._uid=Wr++,t._isVue=!0,t.__v_skip=!0,t._scope=new Ne(!0),t._scope.parent=void 0,t._scope._vm=!0,e&&e._isComponent?function(e,t){var r=e.$options=Object.create(e.constructor.options),n=t._parentVnode;r.parent=t.parent,r._parentVnode=n;var _=n.componentOptions;r.propsData=_.propsData,r._parentListeners=_.listeners,r._renderChildren=_.children,r._componentTag=_.tag,t.render&&(r.render=t.render,r.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=kr(Kr(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,r=t.parent;if(r&&!t.abstract){for(;r.$options.abstract&&r.$parent;)r=r.$parent;r.$children.push(e)}e.$parent=r,e.$root=r?r.$root:e,e.$children=[],e.$refs={},e._provided=r?r._provided:Object.create(null),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&&Xt(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,r=e.$vnode=t._parentVnode,_=r&&r.context;e.$slots=st(t._renderChildren,_),e.$scopedSlots=r?gt(e.$parent,r.data.scopedSlots,e.$slots):n,e._c=function(t,r,n,_){return At(e,t,r,n,_,!1)},e.$createElement=function(t,r,n,_){return At(e,t,r,n,_,!0)};var o=r&&r.data;Oe(e,"$attrs",o&&o.attrs||n,null,!0),Oe(e,"$listeners",t._parentListeners||n,null,!0)}(t),er(t,"beforeCreate",void 0,!1),function(e){var t=dr(e.$options.inject,e);t&&(De(!1),Object.keys(t).forEach((function(r){Oe(e,r,t[r])})),De(!0))}(t),jr(t),function(e){var t=e.$options.provide;if(t){var r=i(t)?t.call(e):t;if(!a(r))return;for(var n=qe(e),_=ae?Reflect.ownKeys(r):Object.keys(r),o=0;o<_.length;o++){var u=_[o];Object.defineProperty(n,u,Object.getOwnPropertyDescriptor(r,u))}}}(t),er(t,"created"),t.$options.el&&t.$mount(t.$options.el)},function(e){var t={get:function(){return this._data}},r={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",r),e.prototype.$set=Me,e.prototype.$delete=Le,e.prototype.$watch=function(e,t,r){if(s(t))return qr(this,e,t,r);(r=r||{}).user=!0;var n=new Kt(this,e,t,r);if(r.immediate){var _='callback for immediate watcher "'.concat(n.expression,'"');ve(),Et(t,this,[n.value],this,_),ye()}return function(){n.teardown()}}}(zr),function(e){var t=/^hook:/;e.prototype.$on=function(e,r){var n=this;if(_(e))for(var o=0,u=e.length;o1?C(r):r;for(var n=C(arguments,1),_='event handler for "'.concat(e,'"'),o=0,u=r.length;oparseInt(this.max)&&Qr(e,t[0],t,this._vnode),this.vnodeToCache=null}}},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)Qr(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Yr(e,(function(e){return Xr(t,e)}))})),this.$watch("exclude",(function(t){Yr(e,(function(e){return!Xr(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=Pt(e),r=t&&t.componentOptions;if(r){var n=Gr(r),_=this.include,o=this.exclude;if(_&&(!n||!Xr(_,n))||o&&n&&Xr(o,n))return t;var u=this.cache,f=this.keys,c=null==t.key?r.Ctor.cid+(r.tag?"::".concat(r.tag):""):t.key;u[c]?(t.componentInstance=u[c].componentInstance,v(f,c),f.push(c)):(this.vnodeToCache=t,this.keyToCache=c),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return q}};Object.defineProperty(e,"config",t),e.util={warn:yr,extend:O,mergeOptions:kr,defineReactive:Oe},e.set=Me,e.delete=Le,e.nextTick=$t,e.observable=function(e){return Ce(e),e},e.options=Object.create(null),V.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,O(e.options.components,Zr),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var r=C(arguments,1);return r.unshift(this),i(e.install)?e.install.apply(e,r):i(e)&&e.apply(null,r),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=kr(this.options,e),this}}(e),Hr(e),function(e){V.forEach((function(t){e[t]=function(e,r){return r?("component"===t&&s(r)&&(r.name=r.name||e,r=this.options._base.extend(r)),"directive"===t&&i(r)&&(r={bind:r,update:r}),this.options[t+"s"][e]=r,r):this.options[t+"s"][e]}}))}(e)}(zr),Object.defineProperty(zr.prototype,"$isServer",{get:ue}),Object.defineProperty(zr.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(zr,"FunctionalRenderContext",{value:pr}),zr.version="2.7.16";var en=h("style,class"),tn=h("input,textarea,option,select,progress"),rn=h("contenteditable,draggable,spellcheck"),nn=h("events,caret,typing,plaintext-only"),_n=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,truespeed,typemustmatch,visible"),on="http://www.w3.org/1999/xlink",un=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},fn=function(e){return un(e)?e.slice(6,e.length):""},cn=function(e){return null==e||!1===e};function an(e){for(var t=e.data,r=e,n=e;u(n.componentInstance);)(n=n.componentInstance._vnode)&&n.data&&(t=bn(n.data,t));for(;u(r=r.parent);)r&&r.data&&(t=bn(t,r.data));return function(e,t){if(u(e)||u(t))return sn(e,dn(t));return""}(t.staticClass,t.class)}function bn(e,t){return{staticClass:sn(e.staticClass,t.staticClass),class:u(e.class)?[e.class,t.class]:t.class}}function sn(e,t){return e?t?e+" "+t:e:t||""}function dn(e){return Array.isArray(e)?function(e){for(var t,r="",n=0,_=e.length;n<_;n++)u(t=dn(e[n]))&&""!==t&&(r&&(r+=" "),r+=t);return r}(e):a(e)?function(e){var t="";for(var r in e)e[r]&&(t&&(t+=" "),t+=r);return t}(e):"string"==typeof e?e:""}var pn={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},gn=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"),wn=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),xn=function(e){return gn(e)||wn(e)};var ln=Object.create(null);var hn=h("text,number,password,search,email,tel,url");var mn=Object.freeze({__proto__:null,createElement:function(e,t){var r=document.createElement(e);return"select"!==e||t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&r.setAttribute("multiple","multiple"),r},createElementNS:function(e,t){return document.createElementNS(pn[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,r){e.insertBefore(t,r)},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,"")}}),vn={create:function(e,t){yn(t)},update:function(e,t){e.data.ref!==t.data.ref&&(yn(e,!0),yn(t))},destroy:function(e){yn(e,!0)}};function yn(e,t){var r=e.data.ref;if(u(r)){var n=e.context,o=e.componentInstance||e.elm,f=t?null:o,c=t?void 0:o;if(i(r))Et(r,n,[f],n,"template ref function");else{var a=e.data.refInFor,b="string"==typeof r||"number"==typeof r,s=$e(r),d=n.$refs;if(b||s)if(a){var p=b?d[r]:r.value;t?_(p)&&v(p,o):_(p)?p.includes(o)||p.push(o):b?(d[r]=[o],Sn(n,r,d[r])):r.value=[o]}else if(b){if(t&&d[r]!==o)return;d[r]=c,Sn(n,r,f)}else if(s){if(t&&r.value!==o)return;r.value=f}else 0}}}function Sn(e,t,r){var n=e._setupState;n&&S(n,t)&&($e(n[t])?n[t].value=r:n[t]=r)}var Pn=new de("",{},[]),An=["create","activate","update","remove","destroy"];function Tn(e,t){return e.key===t.key&&e.asyncFactory===t.asyncFactory&&(e.tag===t.tag&&e.isComment===t.isComment&&u(e.data)===u(t.data)&&function(e,t){if("input"!==e.tag)return!0;var r,n=u(r=e.data)&&u(r=r.attrs)&&r.type,_=u(r=t.data)&&u(r=r.attrs)&&r.type;return n===_||hn(n)&&hn(_)}(e,t)||f(e.isAsyncPlaceholder)&&o(t.asyncFactory.error))}function En(e,t,r){var n,_,o={};for(n=t;n<=r;++n)u(_=e[n].key)&&(o[_]=n);return o}var Dn={create:kn,update:kn,destroy:function(e){kn(e,Pn)}};function kn(e,t){(e.data.directives||t.data.directives)&&function(e,t){var r,n,_,o=e===Pn,u=t===Pn,f=Cn(e.data.directives,e.context),c=Cn(t.data.directives,t.context),i=[],a=[];for(r in c)n=f[r],_=c[r],n?(_.oldValue=n.value,_.oldArg=n.arg,Mn(_,"update",t,e),_.def&&_.def.componentUpdated&&a.push(_)):(Mn(_,"bind",t,e),_.def&&_.def.inserted&&i.push(_));if(i.length){var b=function(){for(var r=0;r-1?Rn(e,t,r):_n(t)?cn(r)?e.removeAttribute(t):(r="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,r)):rn(t)?e.setAttribute(t,function(e,t){return cn(t)||"false"===t?"false":"contenteditable"===e&&nn(t)?t:"true"}(t,r)):un(t)?cn(r)?e.removeAttributeNS(on,fn(t)):e.setAttributeNS(on,t,r):Rn(e,t,r)}function Rn(e,t,r){if(cn(r))e.removeAttribute(t);else{if(Q&&!J&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==r&&!e.__ieph){var n=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",n)};e.addEventListener("input",n),e.__ieph=!0}e.setAttribute(t,r)}}var jn={create:Bn,update:Bn};function $n(e,t){var r=t.elm,n=t.data,_=e.data;if(!(o(n.staticClass)&&o(n.class)&&(o(_)||o(_.staticClass)&&o(_.class)))){var f=an(t),c=r._transitionClasses;u(c)&&(f=sn(f,dn(c))),f!==r._prevClass&&(r.setAttribute("class",f),r._prevClass=f)}}var Un,Vn={create:$n,update:$n};function Nn(e,t,r){var n=Un;return function _(){var o=t.apply(null,arguments);null!==o&&Kn(e,_,r,n)}}var qn=Ct&&!(re&&Number(re[1])<=53);function Wn(e,t,r,n){if(qn){var _=fr,o=t;t=o._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=_||e.timeStamp<=0||e.target.ownerDocument!==document)return o.apply(this,arguments)}}Un.addEventListener(e,t,_e?{capture:r,passive:n}:r)}function Kn(e,t,r,n){(n||Un).removeEventListener(e,t._wrapper||t,r)}function zn(e,t){if(!o(e.data.on)||!o(t.data.on)){var r=t.data.on||{},n=e.data.on||{};Un=t.elm||e.elm,function(e){if(u(e.__r)){var t=Q?"change":"input";e[t]=[].concat(e.__r,e[t]||[]),delete e.__r}u(e.__c)&&(e.change=[].concat(e.__c,e.change||[]),delete e.__c)}(r),ze(r,n,Wn,Kn,Nn,t.context),Un=void 0}}var Hn,Gn={create:zn,update:zn,destroy:function(e){return zn(e,Pn)}};function Xn(e,t){if(!o(e.data.domProps)||!o(t.data.domProps)){var r,n,_=t.elm,c=e.data.domProps||{},i=t.data.domProps||{};for(r in(u(i.__ob__)||f(i._v_attr_proxy))&&(i=t.data.domProps=O({},i)),c)r in i||(_[r]="");for(r in i){if(n=i[r],"textContent"===r||"innerHTML"===r){if(t.children&&(t.children.length=0),n===c[r])continue;1===_.childNodes.length&&_.removeChild(_.childNodes[0])}if("value"===r&&"PROGRESS"!==_.tagName){_._value=n;var a=o(n)?"":String(n);Yn(_,a)&&(_.value=a)}else if("innerHTML"===r&&wn(_.tagName)&&o(_.innerHTML)){(Hn=Hn||document.createElement("div")).innerHTML="".concat(n,"");for(var b=Hn.firstChild;_.firstChild;)_.removeChild(_.firstChild);for(;b.firstChild;)_.appendChild(b.firstChild)}else if(n!==c[r])try{_[r]=n}catch(e){}}}}function Yn(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var r=!0;try{r=document.activeElement!==e}catch(e){}return r&&e.value!==t}(e,t)||function(e,t){var r=e.value,n=e._vModifiers;if(u(n)){if(n.number)return l(r)!==l(t);if(n.trim)return r.trim()!==t.trim()}return r!==t}(e,t))}var Qn={create:Xn,update:Xn},Jn=P((function(e){var t={},r=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach((function(e){if(e){var n=e.split(r);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}));function Zn(e){var t=e_(e.style);return e.staticStyle?O(e.staticStyle,t):t}function e_(e){return Array.isArray(e)?M(e):"string"==typeof e?Jn(e):e}var t_,r_=/^--/,n_=/\s*!important$/,__=function(e,t,r){if(r_.test(t))e.style.setProperty(t,r);else if(n_.test(r))e.style.setProperty(k(t),r.replace(n_,""),"important");else{var n=u_(t);if(Array.isArray(r))for(var _=0,o=r.length;_-1?t.split(i_).forEach((function(t){return e.classList.add(t)})):e.classList.add(t);else{var r=" ".concat(e.getAttribute("class")||""," ");r.indexOf(" "+t+" ")<0&&e.setAttribute("class",(r+t).trim())}}function b_(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(i_).forEach((function(t){return e.classList.remove(t)})):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var r=" ".concat(e.getAttribute("class")||""," "),n=" "+t+" ";r.indexOf(n)>=0;)r=r.replace(n," ");(r=r.trim())?e.setAttribute("class",r):e.removeAttribute("class")}}function s_(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&O(t,d_(e.name||"v")),O(t,e),t}return"string"==typeof e?d_(e):void 0}}var d_=P((function(e){return{enterClass:"".concat(e,"-enter"),enterToClass:"".concat(e,"-enter-to"),enterActiveClass:"".concat(e,"-enter-active"),leaveClass:"".concat(e,"-leave"),leaveToClass:"".concat(e,"-leave-to"),leaveActiveClass:"".concat(e,"-leave-active")}})),p_=X&&!J,g_="transition",w_="transitionend",x_="animation",l_="animationend";p_&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(g_="WebkitTransition",w_="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(x_="WebkitAnimation",l_="webkitAnimationEnd"));var h_=X?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function m_(e){h_((function(){h_(e)}))}function v_(e,t){var r=e._transitionClasses||(e._transitionClasses=[]);r.indexOf(t)<0&&(r.push(t),a_(e,t))}function y_(e,t){e._transitionClasses&&v(e._transitionClasses,t),b_(e,t)}function S_(e,t,r){var n=A_(e,t),_=n.type,o=n.timeout,u=n.propCount;if(!_)return r();var f="transition"===_?w_:l_,c=0,i=function(){e.removeEventListener(f,a),r()},a=function(t){t.target===e&&++c>=u&&i()};setTimeout((function(){c0&&(r="transition",a=u,b=o.length):"animation"===t?i>0&&(r="animation",a=i,b=c.length):b=(r=(a=Math.max(u,i))>0?u>i?"transition":"animation":null)?"transition"===r?o.length:c.length:0,{type:r,timeout:a,propCount:b,hasTransform:"transition"===r&&P_.test(n[g_+"Property"])}}function T_(e,t){for(;e.length1}function O_(e,t){!0!==t.data.show&&D_(t)}var M_=function(e){var t,r,n={},i=e.modules,a=e.nodeOps;for(t=0;tp?m(e,o(r[x+1])?null:r[x+1].elm,r,d,x,n):d>x&&y(t,b,p)}(b,g,x,r,i):u(x)?(u(e.text)&&a.setTextContent(b,""),m(b,null,x,0,x.length-1,r)):u(g)?y(g,0,g.length-1):u(e.text)&&a.setTextContent(b,""):e.text!==t.text&&a.setTextContent(b,t.text),u(p)&&u(d=p.hook)&&u(d=d.postpatch)&&d(e,t)}}}function T(e,t,r){if(f(r)&&u(e.parent))e.parent.data.pendingInsert=t;else for(var n=0;n-1,u.selected!==o&&(u.selected=o);else if(R(j_(u),n))return void(e.selectedIndex!==f&&(e.selectedIndex=f));_||(e.selectedIndex=-1)}}function R_(e,t){return t.every((function(t){return!R(t,e)}))}function j_(e){return"_value"in e?e._value:e.value}function $_(e){e.target.composing=!0}function U_(e){e.target.composing&&(e.target.composing=!1,V_(e.target,"input"))}function V_(e,t){var r=document.createEvent("HTMLEvents");r.initEvent(t,!0,!0),e.dispatchEvent(r)}function N_(e){return!e.componentInstance||e.data&&e.data.transition?e:N_(e.componentInstance._vnode)}var q_={model:L_,show:{bind:function(e,t,r){var n=t.value,_=(r=N_(r)).data&&r.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;n&&_?(r.data.show=!0,D_(r,(function(){e.style.display=o}))):e.style.display=n?o:"none"},update:function(e,t,r){var n=t.value;!n!=!t.oldValue&&((r=N_(r)).data&&r.data.transition?(r.data.show=!0,n?D_(r,(function(){e.style.display=e.__vOriginalDisplay})):k_(r,(function(){e.style.display="none"}))):e.style.display=n?e.__vOriginalDisplay:"none")},unbind:function(e,t,r,n,_){_||(e.style.display=e.__vOriginalDisplay)}}},W_={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 K_(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?K_(Pt(t.children)):e}function z_(e){var t={},r=e.$options;for(var n in r.propsData)t[n]=e[n];var _=r._parentListeners;for(var n in _)t[T(n)]=_[n];return t}function H_(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var G_=function(e){return e.tag||pt(e)},X_=function(e){return"show"===e.name},Y_={name:"transition",props:W_,abstract:!0,render:function(e){var t=this,r=this.$slots.default;if(r&&(r=r.filter(G_)).length){0;var n=this.mode;0;var _=r[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return _;var o=K_(_);if(!o)return _;if(this._leaving)return H_(e,_);var u="__transition-".concat(this._uid,"-");o.key=null==o.key?o.isComment?u+"comment":u+o.tag:c(o.key)?0===String(o.key).indexOf(u)?o.key:u+o.key:o.key;var f=(o.data||(o.data={})).transition=z_(this),i=this._vnode,a=K_(i);if(o.data.directives&&o.data.directives.some(X_)&&(o.data.show=!0),a&&a.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(o,a)&&!pt(a)&&(!a.componentInstance||!a.componentInstance._vnode.isComment)){var b=a.data.transition=O({},f);if("out-in"===n)return this._leaving=!0,He(b,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),H_(e,_);if("in-out"===n){if(pt(o))return i;var s,d=function(){s()};He(f,"afterEnter",d),He(f,"enterCancelled",d),He(b,"delayLeave",(function(e){s=e}))}}return _}}},Q_=O({tag:String,moveClass:String},W_);function J_(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Z_(e){e.data.newPos=e.elm.getBoundingClientRect()}function eo(e){var t=e.data.pos,r=e.data.newPos,n=t.left-r.left,_=t.top-r.top;if(n||_){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate(".concat(n,"px,").concat(_,"px)"),o.transitionDuration="0s"}}delete Q_.mode;var to={Transition:Y_,TransitionGroup:{props:Q_,beforeMount:function(){var e=this,t=this._update;this._update=function(r,n){var _=Qt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,_(),t.call(e,r,n)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",r=Object.create(null),n=this.prevChildren=this.children,_=this.$slots.default||[],o=this.children=[],u=z_(this),f=0;f<_.length;f++){if((a=_[f]).tag)if(null!=a.key&&0!==String(a.key).indexOf("__vlist"))o.push(a),r[a.key]=a,(a.data||(a.data={})).transition=u;else;}if(n){var c=[],i=[];for(f=0;f-1?ln[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ln[e]=/HTMLUnknownElement/.test(t.toString())},O(zr.options.directives,q_),O(zr.options.components,to),zr.prototype.__patch__=X?M_:L,zr.prototype.$mount=function(e,t){return function(e,t,r){var n;e.$el=t,e.$options.render||(e.$options.render=pe),er(e,"beforeMount"),n=function(){e._update(e._render(),r)},new Kt(e,n,L,{before:function(){e._isMounted&&!e._isDestroyed&&er(e,"beforeUpdate")}},!0),r=!1;var _=e._preWatchers;if(_)for(var o=0;o<_.length;o++)_[o].run();return null==e.$vnode&&(e._isMounted=!0,er(e,"mounted")),e}(this,e=e&&X?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},X&&setTimeout((function(){q.devtools&&fe&&fe.emit("init",zr)}),0);var no=/[!'()*]/g,_o=function(e){return"%"+e.charCodeAt(0).toString(16)},oo=/%2C/g,uo=function(e){return encodeURIComponent(e).replace(no,_o).replace(oo,",")};function fo(e){try{return decodeURIComponent(e)}catch(e){0}return e}var co=function(e){return null==e||"object"==typeof e?e:String(e)};function io(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var r=e.replace(/\+/g," ").split("="),n=fo(r.shift()),_=r.length>0?fo(r.join("=")):null;void 0===t[n]?t[n]=_:Array.isArray(t[n])?t[n].push(_):t[n]=[t[n],_]})),t):t}function ao(e){var t=e?Object.keys(e).map((function(t){var r=e[t];if(void 0===r)return"";if(null===r)return uo(t);if(Array.isArray(r)){var n=[];return r.forEach((function(e){void 0!==e&&(null===e?n.push(uo(t)):n.push(uo(t)+"="+uo(e)))})),n.join("&")}return uo(t)+"="+uo(r)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var bo=/\/?$/;function so(e,t,r,n){var _=n&&n.options.stringifyQuery,o=t.query||{};try{o=po(o)}catch(e){}var u={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:o,params:t.params||{},fullPath:xo(t,_),matched:e?wo(e):[]};return r&&(u.redirectedFrom=xo(r,_)),Object.freeze(u)}function po(e){if(Array.isArray(e))return e.map(po);if(e&&"object"==typeof e){var t={};for(var r in e)t[r]=po(e[r]);return t}return e}var go=so(null,{path:"/"});function wo(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function xo(e,t){var r=e.path,n=e.query;void 0===n&&(n={});var _=e.hash;return void 0===_&&(_=""),(r||"/")+(t||ao)(n)+_}function lo(e,t,r){return t===go?e===t:!!t&&(e.path&&t.path?e.path.replace(bo,"")===t.path.replace(bo,"")&&(r||e.hash===t.hash&&ho(e.query,t.query)):!(!e.name||!t.name)&&(e.name===t.name&&(r||e.hash===t.hash&&ho(e.query,t.query)&&ho(e.params,t.params))))}function ho(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var r=Object.keys(e).sort(),n=Object.keys(t).sort();return r.length===n.length&&r.every((function(r,_){var o=e[r];if(n[_]!==r)return!1;var u=t[r];return null==o||null==u?o===u:"object"==typeof o&&"object"==typeof u?ho(o,u):String(o)===String(u)}))}function mo(e){for(var t=0;t=0&&(t=e.slice(n),e=e.slice(0,n));var _=e.indexOf("?");return _>=0&&(r=e.slice(_+1),e=e.slice(0,_)),{path:e,query:r,hash:t}}(_.path||""),i=t&&t.path||"/",a=c.path?So(c.path,i,r||_.append):i,b=function(e,t,r){void 0===t&&(t={});var n,_=r||io;try{n=_(e||"")}catch(e){n={}}for(var o in t){var u=t[o];n[o]=Array.isArray(u)?u.map(co):co(u)}return n}(c.query,_.query,n&&n.options.parseQuery),s=_.hash||c.hash;return s&&"#"!==s.charAt(0)&&(s="#"+s),{_normalized:!0,path:a,query:b,hash:s}}var Wo,Ko=function(){},zo={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(e){var t=this,r=this.$router,n=this.$route,_=r.resolve(this.to,n,this.append),o=_.location,u=_.route,f=_.href,c={},i=r.options.linkActiveClass,a=r.options.linkExactActiveClass,b=null==i?"router-link-active":i,s=null==a?"router-link-exact-active":a,d=null==this.activeClass?b:this.activeClass,p=null==this.exactActiveClass?s:this.exactActiveClass,g=u.redirectedFrom?so(null,qo(u.redirectedFrom),null,r):u;c[p]=lo(n,g,this.exactPath),c[d]=this.exact||this.exactPath?c[p]:function(e,t){return 0===e.path.replace(bo,"/").indexOf(t.path.replace(bo,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var r in t)if(!(r in e))return!1;return!0}(e.query,t.query)}(n,g);var w=c[p]?this.ariaCurrentValue:null,x=function(e){Ho(e)&&(t.replace?r.replace(o,Ko):r.push(o,Ko))},l={click:Ho};Array.isArray(this.event)?this.event.forEach((function(e){l[e]=x})):l[this.event]=x;var h={class:c},m=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:f,route:u,navigate:x,isActive:c[d],isExactActive:c[p]});if(m){if(1===m.length)return m[0];if(m.length>1||!m.length)return 0===m.length?e():e("span",{},m)}if("a"===this.tag)h.on=l,h.attrs={href:f,"aria-current":w};else{var v=function e(t){var r;if(t)for(var n=0;n-1&&(f.params[s]=r.params[s]);return f.path=No(a.path,f.params),c(a,f,u)}if(f.path){f.params={};for(var d=0;d-1}function Pu(e,t){return Su(e)&&e._isRouter&&(null==t||e.type===t)}function Au(e,t,r){var n=function(_){_>=e.length?r():e[_]?t(e[_],(function(){n(_+1)})):n(_+1)};n(0)}function Tu(e){return function(t,r,n){var _=!1,o=0,u=null;Eu(e,(function(e,t,r,f){if("function"==typeof e&&void 0===e.cid){_=!0,o++;var c,i=Iu((function(t){var _;((_=t).__esModule||ku&&"Module"===_[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:Wo.extend(t),r.components[f]=t,--o<=0&&n()})),a=Iu((function(e){var t="Failed to resolve async component "+f+": "+e;u||(u=Su(e)?e:new Error(t),n(u))}));try{c=e(i,a)}catch(e){a(e)}if(c)if("function"==typeof c.then)c.then(i,a);else{var b=c.component;b&&"function"==typeof b.then&&b.then(i,a)}}})),_||n()}}function Eu(e,t){return Du(e.map((function(e){return Object.keys(e.components).map((function(r){return t(e.components[r],e.instances[r],e,r)}))})))}function Du(e){return Array.prototype.concat.apply([],e)}var ku="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Iu(e){var t=!1;return function(){for(var r=[],n=arguments.length;n--;)r[n]=arguments[n];if(!t)return t=!0,e.apply(this,r)}}var Cu=function(e,t){this.router=e,this.base=function(e){if(!e)if(Go){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=go,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function Ou(e,t,r,n){var _=Eu(e,(function(e,n,_,o){var u=function(e,t){"function"!=typeof e&&(e=Wo.extend(e));return e.options[t]}(e,t);if(u)return Array.isArray(u)?u.map((function(e){return r(e,n,_,o)})):r(u,n,_,o)}));return Du(n?_.reverse():_)}function Mu(e,t){if(t)return function(){return e.apply(t,arguments)}}Cu.prototype.listen=function(e){this.cb=e},Cu.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Cu.prototype.onError=function(e){this.errorCbs.push(e)},Cu.prototype.transitionTo=function(e,t,r){var n,_=this;try{n=this.router.match(e,this.current)}catch(e){throw this.errorCbs.forEach((function(t){t(e)})),e}var o=this.current;this.confirmTransition(n,(function(){_.updateRoute(n),t&&t(n),_.ensureURL(),_.router.afterHooks.forEach((function(e){e&&e(n,o)})),_.ready||(_.ready=!0,_.readyCbs.forEach((function(e){e(n)})))}),(function(e){r&&r(e),e&&!_.ready&&(Pu(e,lu.redirected)&&o===go||(_.ready=!0,_.readyErrorCbs.forEach((function(t){t(e)}))))}))},Cu.prototype.confirmTransition=function(e,t,r){var n=this,_=this.current;this.pending=e;var o,u,f=function(e){!Pu(e)&&Su(e)&&(n.errorCbs.length?n.errorCbs.forEach((function(t){t(e)})):console.error(e)),r&&r(e)},c=e.matched.length-1,i=_.matched.length-1;if(lo(e,_)&&c===i&&e.matched[c]===_.matched[i])return this.ensureURL(),e.hash&&uu(this.router,_,e,!1),f(((u=vu(o=_,e,lu.duplicated,'Avoided redundant navigation to current location: "'+o.fullPath+'".')).name="NavigationDuplicated",u));var a=function(e,t){var r,n=Math.max(e.length,t.length);for(r=0;r0)){var t=this.router,r=t.options.scrollBehavior,n=gu&&r;n&&this.listeners.push(ou());var _=function(){var r=e.current,_=Bu(e.base);e.current===go&&_===e._startLocation||e.transitionTo(_,(function(e){n&&uu(t,e,r,!0)}))};window.addEventListener("popstate",_),this.listeners.push((function(){window.removeEventListener("popstate",_)}))}},t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){wu(Po(n.base+e.fullPath)),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.replace=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){xu(Po(n.base+e.fullPath)),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.ensureURL=function(e){if(Bu(this.base)!==this.current.fullPath){var t=Po(this.base+this.current.fullPath);e?wu(t):xu(t)}},t.prototype.getCurrentLocation=function(){return Bu(this.base)},t}(Cu);function Bu(e){var t=window.location.pathname,r=t.toLowerCase(),n=e.toLowerCase();return!e||r!==n&&0!==r.indexOf(Po(n+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Fu=function(e){function t(t,r,n){e.call(this,t,r),n&&function(e){var t=Bu(e);if(!/^\/#/.test(t))return window.location.replace(Po(e+"/#"+t)),!0}(this.base)||Ru()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router.options.scrollBehavior,r=gu&&t;r&&this.listeners.push(ou());var n=function(){var t=e.current;Ru()&&e.transitionTo(ju(),(function(n){r&&uu(e.router,n,t,!0),gu||Vu(n.fullPath)}))},_=gu?"popstate":"hashchange";window.addEventListener(_,n),this.listeners.push((function(){window.removeEventListener(_,n)}))}},t.prototype.push=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){Uu(e.fullPath),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.replace=function(e,t,r){var n=this,_=this.current;this.transitionTo(e,(function(e){Vu(e.fullPath),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;ju()!==t&&(e?Uu(t):Vu(t))},t.prototype.getCurrentLocation=function(){return ju()},t}(Cu);function Ru(){var e=ju();return"/"===e.charAt(0)||(Vu("/"+e),!1)}function ju(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function $u(e){var t=window.location.href,r=t.indexOf("#");return(r>=0?t.slice(0,r):t)+"#"+e}function Uu(e){gu?wu($u(e)):window.location.hash=e}function Vu(e){gu?xu($u(e)):window.location.replace($u(e))}var Nu=function(e){function t(t,r){e.call(this,t,r),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,r){var n=this;this.transitionTo(e,(function(e){n.stack=n.stack.slice(0,n.index+1).concat(e),n.index++,t&&t(e)}),r)},t.prototype.replace=function(e,t,r){var n=this;this.transitionTo(e,(function(e){n.stack=n.stack.slice(0,n.index).concat(e),t&&t(e)}),r)},t.prototype.go=function(e){var t=this,r=this.index+e;if(!(r<0||r>=this.stack.length)){var n=this.stack[r];this.confirmTransition(n,(function(){var e=t.current;t.index=r,t.updateRoute(n),t.router.afterHooks.forEach((function(t){t&&t(n,e)}))}),(function(e){Pu(e,lu.duplicated)&&(t.index=r)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(Cu),qu=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Qo(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!gu&&!1!==e.fallback,this.fallback&&(t="hash"),Go||(t="abstract"),this.mode=t,t){case"history":this.history=new Lu(this,e.base);break;case"hash":this.history=new Fu(this,e.base,this.fallback);break;case"abstract":this.history=new Nu(this,e.base);break;default:0}},Wu={currentRoute:{configurable:!0}};qu.prototype.match=function(e,t,r){return this.matcher.match(e,t,r)},Wu.currentRoute.get=function(){return this.history&&this.history.current},qu.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var r=t.apps.indexOf(e);r>-1&&t.apps.splice(r,1),t.app===e&&(t.app=t.apps[0]||null),t.app||t.history.teardown()})),!this.app){this.app=e;var r=this.history;if(r instanceof Lu||r instanceof Fu){var n=function(e){r.setupListeners(),function(e){var n=r.current,_=t.options.scrollBehavior;gu&&_&&"fullPath"in e&&uu(t,e,n,!1)}(e)};r.transitionTo(r.getCurrentLocation(),n,n)}r.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},qu.prototype.beforeEach=function(e){return zu(this.beforeHooks,e)},qu.prototype.beforeResolve=function(e){return zu(this.resolveHooks,e)},qu.prototype.afterEach=function(e){return zu(this.afterHooks,e)},qu.prototype.onReady=function(e,t){this.history.onReady(e,t)},qu.prototype.onError=function(e){this.history.onError(e)},qu.prototype.push=function(e,t,r){var n=this;if(!t&&!r&&"undefined"!=typeof Promise)return new Promise((function(t,r){n.history.push(e,t,r)}));this.history.push(e,t,r)},qu.prototype.replace=function(e,t,r){var n=this;if(!t&&!r&&"undefined"!=typeof Promise)return new Promise((function(t,r){n.history.replace(e,t,r)}));this.history.replace(e,t,r)},qu.prototype.go=function(e){this.history.go(e)},qu.prototype.back=function(){this.go(-1)},qu.prototype.forward=function(){this.go(1)},qu.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]}))}))):[]},qu.prototype.resolve=function(e,t,r){var n=qo(e,t=t||this.history.current,r,this),_=this.match(n,t),o=_.redirectedFrom||_.fullPath;return{location:n,route:_,href:function(e,t,r){var n="hash"===r?"#"+t:t;return e?Po(e+"/"+n):n}(this.history.base,o,this.mode),normalizedTo:n,resolved:_}},qu.prototype.getRoutes=function(){return this.matcher.getRoutes()},qu.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},qu.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(qu.prototype,Wu);var Ku=qu;function zu(e,t){return e.push(t),function(){var r=e.indexOf(t);r>-1&&e.splice(r,1)}}qu.install=function e(t){if(!e.installed||Wo!==t){e.installed=!0,Wo=t;var r=function(e){return void 0!==e},n=function(e,t){var n=e.$options._parentVnode;r(n)&&r(n=n.data)&&r(n=n.registerRouteInstance)&&n(e,t)};t.mixin({beforeCreate:function(){r(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,n(this,this)},destroyed:function(){n(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",vo),t.component("RouterLink",zo);var _=t.config.optionMergeStrategies;_.beforeRouteEnter=_.beforeRouteLeave=_.beforeRouteUpdate=_.created}},qu.version="3.6.5",qu.isNavigationFailure=Pu,qu.NavigationFailureType=lu,qu.START_LOCATION=go,Go&&window.Vue&&window.Vue.use(qu);r(102);r(92),r(99);var Hu={"components/AlgoliaSearchBox":()=>Promise.all([r.e(0),r.e(38)]).then(r.bind(null,424)),"components/DropdownLink":()=>Promise.all([r.e(0),r.e(25)]).then(r.bind(null,296)),"components/DropdownTransition":()=>Promise.all([r.e(0),r.e(39)]).then(r.bind(null,287)),"components/Home":()=>Promise.all([r.e(0),r.e(29)]).then(r.bind(null,318)),"components/NavLink":()=>r.e(45).then(r.bind(null,286)),"components/NavLinks":()=>Promise.all([r.e(0),r.e(24)]).then(r.bind(null,304)),"components/Navbar":()=>Promise.all([r.e(0),r.e(1)]).then(r.bind(null,421)),"components/Page":()=>Promise.all([r.e(0),r.e(34)]).then(r.bind(null,319)),"components/Sidebar":()=>Promise.all([r.e(0),r.e(22)]).then(r.bind(null,320)),"components/SidebarButton":()=>Promise.all([r.e(0),r.e(40)]).then(r.bind(null,321)),"components/SidebarGroup":()=>Promise.all([r.e(0),r.e(3)]).then(r.bind(null,305)),"components/SidebarLink":()=>Promise.all([r.e(0),r.e(35)]).then(r.bind(null,297)),"components/SidebarLinks":()=>Promise.all([r.e(0),r.e(3)]).then(r.bind(null,295)),"global-components/Badge":()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,430)),"layouts/404":()=>r.e(5).then(r.bind(null,425)),"layouts/Layout":()=>Promise.all([r.e(0),r.e(1),r.e(2)]).then(r.bind(null,426)),NotFound:()=>r.e(5).then(r.bind(null,425)),Layout:()=>Promise.all([r.e(0),r.e(1),r.e(2)]).then(r.bind(null,426))},Gu={"v-07f576f6":()=>r.e(54).then(r.bind(null,431)),"v-55ea2f06":()=>r.e(55).then(r.bind(null,432)),"v-7458dcb4":()=>r.e(42).then(r.bind(null,433)),"v-71235e06":()=>r.e(41).then(r.bind(null,434)),"v-9a956228":()=>r.e(30).then(r.bind(null,435)),"v-935ace04":()=>r.e(28).then(r.bind(null,436)),"v-c7f0409c":()=>r.e(46).then(r.bind(null,437)),"v-3d85f24e":()=>r.e(47).then(r.bind(null,438)),"v-c24b02f4":()=>r.e(43).then(r.bind(null,439)),"v-13b45cbc":()=>r.e(36).then(r.bind(null,440)),"v-085c52d5":()=>r.e(56).then(r.bind(null,441)),"v-77ecefa4":()=>r.e(26).then(r.bind(null,442)),"v-77b18c66":()=>r.e(23).then(r.bind(null,443)),"v-7f8ace16":()=>r.e(27).then(r.bind(null,444)),"v-5dc20574":()=>r.e(44).then(r.bind(null,445)),"v-6dbdf7a6":()=>r.e(31).then(r.bind(null,446)),"v-0578da5e":()=>r.e(57).then(r.bind(null,447)),"v-e802d5c8":()=>r.e(58).then(r.bind(null,448)),"v-cdebead0":()=>r.e(60).then(r.bind(null,449)),"v-12844fda":()=>r.e(59).then(r.bind(null,450)),"v-1f8fc556":()=>r.e(61).then(r.bind(null,451)),"v-b3d4ffd8":()=>r.e(62).then(r.bind(null,452)),"v-38c220fe":()=>r.e(63).then(r.bind(null,453)),"v-5959fdec":()=>r.e(48).then(r.bind(null,454)),"v-548430c6":()=>r.e(64).then(r.bind(null,455)),"v-73b54474":()=>r.e(65).then(r.bind(null,456)),"v-0d6f29f2":()=>r.e(49).then(r.bind(null,457)),"v-41e63074":()=>r.e(32).then(r.bind(null,458)),"v-87b76dc4":()=>r.e(50).then(r.bind(null,459)),"v-739629a6":()=>r.e(66).then(r.bind(null,460)),"v-4a02acc0":()=>r.e(51).then(r.bind(null,461)),"v-5f93f1f6":()=>r.e(67).then(r.bind(null,462)),"v-a9b07284":()=>r.e(52).then(r.bind(null,463)),"v-0de8b466":()=>r.e(68).then(r.bind(null,464))};function Xu(e){const t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}const Yu=/-(\w)/g,Qu=Xu(e=>e.replace(Yu,(e,t)=>t?t.toUpperCase():"")),Ju=/\B([A-Z])/g,Zu=Xu(e=>e.replace(Ju,"-$1").toLowerCase()),ef=Xu(e=>e.charAt(0).toUpperCase()+e.slice(1));function tf(e,t){if(!t)return;if(e(t))return e(t);return t.includes("-")?e(ef(Qu(t))):e(ef(t))||e(Zu(t))}const rf=Object.assign({},Hu,Gu),nf=e=>rf[e],_f=e=>Gu[e],of=e=>Hu[e],uf=e=>zr.component(e);function ff(e){return tf(_f,e)}function cf(e){return tf(of,e)}function af(e){return tf(nf,e)}function bf(e){return tf(uf,e)}function sf(...e){return Promise.all(e.filter(e=>e).map(async e=>{if(!bf(e)&&af(e)){const t=await af(e)();zr.component(e,t.default)}}))}function df(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}var pf=r(89),gf=r.n(pf),wf=r(90),xf=r.n(wf),lf={created(){if(this.siteMeta=this.$site.headTags.filter(([e])=>"meta"===e).map(([e,t])=>t),this.$ssrContext){const t=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(e=t)?e.map(e=>{let t="{t+=` ${r}="${xf()(e[r])}"`}),t+">"}).join("\n "):"",this.$ssrContext.canonicalLink=mf(this.$canonicalUrl)}var e},mounted(){this.currentMetaTags=[...document.querySelectorAll("meta")],this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const e=this.getMergedMetaTags();this.currentMetaTags=vf(e,this.currentMetaTags)},getMergedMetaTags(){const e=this.$page.frontmatter.meta||[];return gf()([{name:"description",content:this.$description}],e,this.siteMeta,yf)},updateCanonicalLink(){hf(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",mf(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){vf(null,this.currentMetaTags),hf()}};function hf(){const e=document.querySelector("link[rel='canonical']");e&&e.remove()}function mf(e=""){return e?``:""}function vf(e,t){if(t&&[...t].filter(e=>e.parentNode===document.head).forEach(e=>document.head.removeChild(e)),e)return e.map(e=>{const t=document.createElement("meta");return Object.keys(e).forEach(r=>{t.setAttribute(r,e[r])}),document.head.appendChild(t),t})}function yf(e){for(const t of["name","property","itemprop"])if(e.hasOwnProperty(t))return e[t]+t;return JSON.stringify(e)}var Sf=r(22),Pf=r.n(Sf),Af={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Pf()((function(){this.setActiveHash()}),300),setActiveHash(){const e=[].slice.call(document.querySelectorAll(".sidebar-link")),t=[].slice.call(document.querySelectorAll(".header-anchor")).filter(t=>e.some(e=>e.hash===t.hash)),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),n=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),_=window.innerHeight+r;for(let e=0;e=o.parentElement.offsetTop+10&&(!u||r{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}},Tf=r(23),Ef=r.n(Tf),Df={mounted(){Ef.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,r)=>{e.path===t.path||zr.component(e.name)||Ef.a.start(),r()}),this.$router.afterEach(()=>{Ef.a.done(),this.isSidebarOpen=!1})}},kf={props:{parent:Object,code:String,options:{align:String,color:String,backgroundTransition:Boolean,backgroundColor:String,successText:String,staticIcon:Boolean}},data:()=>({success:!1,originalBackground:null,originalTransition:null}),computed:{alignStyle(){let e={};return e[this.options.align]="7.5px",e},iconClass(){return this.options.staticIcon?"":"hover"}},mounted(){this.originalTransition=this.parent.style.transition,this.originalBackground=this.parent.style.background},beforeDestroy(){this.parent.style.transition=this.originalTransition,this.parent.style.background=this.originalBackground},methods:{hexToRgb(e){let 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(e){if(navigator.clipboard)navigator.clipboard.writeText(this.code).then(()=>{this.setSuccessTransitions()},()=>{});else{let e=document.createElement("textarea");document.body.appendChild(e),e.value=this.code,e.select(),document.execCommand("Copy"),e.remove(),this.setSuccessTransitions()}},setSuccessTransitions(){if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";let e=this.hexToRgb(this.options.backgroundColor);this.parent.style.background=`rgba(${e.r}, ${e.g}, ${e.b}, 0.1)`}this.success=!0,this.successTimeout=setTimeout(()=>{this.options.backgroundTransition&&(this.parent.style.background=this.originalBackground,this.parent.style.transition=this.originalTransition),this.success=!1},500)}}},If=(r(236),r(7)),Cf=Object(If.a)(kf,(function(){var e=this,t=e._self._c;return t("div",{staticClass:"code-copy"},[t("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}},[t("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),e._v(" "),t("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(" "),t("span",{class:e.success?"success":"",style:e.alignStyle},[e._v("\n "+e._s(e.options.successText)+"\n ")])])}),[],!1,null,"49140617",null).exports,Of=(r(237),[lf,Af,Df,{updated(){this.update()},methods:{update(){setTimeout(()=>{document.querySelectorAll('div[class*="language-"] pre').forEach(e=>{if(e.classList.contains("code-copy-added"))return;let t=new(zr.extend(Cf));t.options={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)}}}]),Mf={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return df("layout",e),zr.component(e)}},methods:{getLayout(){if(this.$page.path){const e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},Lf=Object(If.a)(Mf,(function(){return(0,this._self._c)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(e,t,r){switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],r);break;case"mixins":e[t]||(e[t]=[]),e[t].push(...r);break;default:throw new Error("Unknown option name.")}}(Lf,"mixins",Of);const Bf=[{name:"v-07f576f6",path:"/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-07f576f6").then(r)}},{path:"/index.html",redirect:"/"},{name:"v-55ea2f06",path:"/beginner/tutorial1-window/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-55ea2f06").then(r)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-7458dcb4",path:"/beginner/tutorial3-pipeline/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-7458dcb4").then(r)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-71235e06",path:"/beginner/tutorial2-surface/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-71235e06").then(r)}},{path:"/beginner/tutorial2-surface/index.html",redirect:"/beginner/tutorial2-surface/"},{name:"v-9a956228",path:"/beginner/tutorial4-buffer/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-9a956228").then(r)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-935ace04",path:"/beginner/tutorial5-textures/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-935ace04").then(r)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-c7f0409c",path:"/beginner/tutorial6-uniforms/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-c7f0409c").then(r)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-3d85f24e",path:"/beginner/tutorial7-instancing/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-3d85f24e").then(r)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-c24b02f4",path:"/beginner/tutorial8-depth/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-c24b02f4").then(r)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-13b45cbc",path:"/beginner/tutorial9-models/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-13b45cbc").then(r)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-085c52d5",path:"/intermediate/pbr-notes.html",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-085c52d5").then(r)}},{name:"v-77ecefa4",path:"/intermediate/tutorial11-normals/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-77ecefa4").then(r)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-77b18c66",path:"/intermediate/tutorial10-lighting/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-77b18c66").then(r)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-7f8ace16",path:"/intermediate/tutorial13-hdr/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-7f8ace16").then(r)}},{path:"/intermediate/tutorial13-hdr/index.html",redirect:"/intermediate/tutorial13-hdr/"},{name:"v-5dc20574",path:"/intermediate/tutorial12-camera/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-5dc20574").then(r)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-6dbdf7a6",path:"/intermediate/wip-terrain/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-6dbdf7a6").then(r)}},{path:"/intermediate/wip-terrain/index.html",redirect:"/intermediate/wip-terrain/"},{name:"v-0578da5e",path:"/news/0.12/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-0578da5e").then(r)}},{path:"/news/0.12/index.html",redirect:"/news/0.12/"},{name:"v-e802d5c8",path:"/news/0.13/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-e802d5c8").then(r)}},{path:"/news/0.13/index.html",redirect:"/news/0.13/"},{name:"v-cdebead0",path:"/news/0.15/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-cdebead0").then(r)}},{path:"/news/0.15/index.html",redirect:"/news/0.15/"},{name:"v-12844fda",path:"/news/0.14/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-12844fda").then(r)}},{path:"/news/0.14/index.html",redirect:"/news/0.14/"},{name:"v-1f8fc556",path:"/news/0.16/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-1f8fc556").then(r)}},{path:"/news/0.16/index.html",redirect:"/news/0.16/"},{name:"v-b3d4ffd8",path:"/news/0.17/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-b3d4ffd8").then(r)}},{path:"/news/0.17/index.html",redirect:"/news/0.17/"},{name:"v-38c220fe",path:"/news/0.18%20and%20hdr/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-38c220fe").then(r)}},{path:"/news/0.18 and hdr/",redirect:"/news/0.18%20and%20hdr/"},{path:"/news/0.18%20and%20hdr/index.html",redirect:"/news/0.18%20and%20hdr/"},{path:"/news/0.18 and hdr/",redirect:"/news/0.18%20and%20hdr/"},{name:"v-5959fdec",path:"/news/pre-0.12/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-5959fdec").then(r)}},{path:"/news/pre-0.12/index.html",redirect:"/news/pre-0.12/"},{name:"v-548430c6",path:"/showcase/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-548430c6").then(r)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-73b54474",path:"/showcase/alignment/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-73b54474").then(r)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-0d6f29f2",path:"/showcase/gifs/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-0d6f29f2").then(r)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-41e63074",path:"/showcase/compute/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-41e63074").then(r)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-87b76dc4",path:"/showcase/imgui-demo/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-87b76dc4").then(r)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-739629a6",path:"/showcase/threading/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-739629a6").then(r)}},{path:"/showcase/threading/index.html",redirect:"/showcase/threading/"},{name:"v-4a02acc0",path:"/showcase/pong/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-4a02acc0").then(r)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-5f93f1f6",path:"/todo.html",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-5f93f1f6").then(r)}},{name:"v-a9b07284",path:"/showcase/windowless/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-a9b07284").then(r)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-0de8b466",path:"/topics/",component:Lf,beforeEnter:(e,t,r)=>{sf("Layout","v-0de8b466").then(r)}},{path:"/topics/index.html",redirect:"/topics/"},{path:"*",component:Lf}],Ff={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",headTags:[],pages:[{title:"Introduction",frontmatter:{},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:"Translations",slug:"translations"},{level:2,title:"Special thanks to these patrons!",slug:"special-thanks-to-these-patrons"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Dependencies and the window",frontmatter:{},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:"Create a new project",slug:"create-a-new-project"},{level:2,title:"The code",slug:"the-code"},{level:2,title:"Added support for the web",slug:"added-support-for-the-web"},{level:2,title:"Web Assembly",slug:"web-assembly"},{level:2,title:"More code",slug:"more-code"},{level:2,title:"Wasm Pack",slug:"wasm-pack"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"The Pipeline",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"The Surface",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Buffers and Indices",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Textures and bind groups",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Uniform buffers and a 3d camera",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Instancing",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"The Depth Buffer",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Model Loading",frontmatter:{},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:"Accessing files from WASM",slug:"accessing-files-from-wasm"},{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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Sources",frontmatter:{},regularPath:"/intermediate/pbr-notes.html",relativePath:"intermediate/pbr-notes.md",key:"v-085c52d5",path:"/intermediate/pbr-notes.html",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Normal Mapping",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Working with Lights",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"High Dynamic Range Rendering",frontmatter:{},regularPath:"/intermediate/tutorial13-hdr/",relativePath:"intermediate/tutorial13-hdr/readme.md",key:"v-7f8ace16",path:"/intermediate/tutorial13-hdr/",headers:[{level:2,title:"What is High Dynamic Range?",slug:"what-is-high-dynamic-range"},{level:2,title:"Switching to HDR",slug:"switching-to-hdr"},{level:2,title:"Tonemapping",slug:"tonemapping"},{level:2,title:"Loading HDR textures",slug:"loading-hdr-textures"},{level:2,title:"Equirectangular textures",slug:"equirectangular-textures"},{level:2,title:"Cube Maps",slug:"cube-maps"},{level:2,title:"Compute shaders",slug:"compute-shaders"},{level:2,title:"The compute shader",slug:"the-compute-shader"},{level:2,title:"Skybox",slug:"skybox"},{level:2,title:"Reflections",slug:"reflections"},{level:2,title:"Demo",slug:"demo"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"A Better Camera",frontmatter:{},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 lib.rs",slug:"cleaning-up-lib-rs"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Procedural Terrain",frontmatter:{},regularPath:"/intermediate/wip-terrain/",relativePath:"intermediate/wip-terrain/README.md",key:"v-6dbdf7a6",path:"/intermediate/wip-terrain/",headers:[{level:2,title:"Compute Shaders",slug:"compute-shaders"},{level:2,title:"Noise Functions",slug:"noise-functions"},{level:2,title:"Generating the mesh",slug:"generating-the-mesh"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Update to 0.12!",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Update to 0.13!",frontmatter:{},regularPath:"/news/0.13/",relativePath:"news/0.13/readme.md",key:"v-e802d5c8",path:"/news/0.13/",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Update to 0.15!",frontmatter:{},regularPath:"/news/0.15/",relativePath:"news/0.15/readme.md",key:"v-cdebead0",path:"/news/0.15/",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Update to 0.14!",frontmatter:{},regularPath:"/news/0.14/",relativePath:"news/0.14/readme.md",key:"v-12844fda",path:"/news/0.14/",headers:[{level:2,title:"SurfaceConfiguration changes",slug:"surfaceconfiguration-changes"},{level:2,title:"Winit updated",slug:"winit-updated"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Update to 0.16",frontmatter:{},regularPath:"/news/0.16/",relativePath:"news/0.16/readme.md",key:"v-1f8fc556",path:"/news/0.16/",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Update to 0.17",frontmatter:{},regularPath:"/news/0.17/",relativePath:"news/0.17/readme.md",key:"v-b3d4ffd8",path:"/news/0.17/",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Update to 0.18 and HDR tutorial",frontmatter:{},regularPath:"/news/0.18%20and%20hdr/",relativePath:"news/0.18 and hdr/readme.md",key:"v-38c220fe",path:"/news/0.18%20and%20hdr/",headers:[{level:2,title:"HDR tutorial",slug:"hdr-tutorial"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"News (Pre 0.12)",frontmatter:{},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 due to not specifying the correct usage",slug:"fixed-panics-due-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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Foreword",frontmatter:{},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-548430c6",path:"/showcase/",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Memory Layout in WGSL",frontmatter:{},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"},{level:2,title:"Additional resources",slug:"additional-resources"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Creating gifs",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Compute Example: Tangents and Bitangents",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Basic Imgui Demo",frontmatter:{},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-87b76dc4",path:"/showcase/imgui-demo/",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{},regularPath:"/showcase/threading/",relativePath:"showcase/threading/README.md",key:"v-739629a6",path:"/showcase/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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Pong",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Coming Soon!",frontmatter:{},regularPath:"/todo.html",relativePath:"todo.md",key:"v-5f93f1f6",path:"/todo.html",lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Wgpu without a window",frontmatter:{},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:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4},{title:"Topics Covered",frontmatter:{},regularPath:"/topics/",relativePath:"topics/readme.md",key:"v-0de8b466",path:"/topics/",headers:[{level:2,title:"Basics",slug:"basics"},{level:2,title:"Lighting",slug:"lighting"},{level:2,title:"Misc",slug:"misc"}],lastUpdated:"1/20/2024, 10:13:50 PM",lastUpdatedTimestamp:170578883e4}],themeConfig:{domain:"/learn-wgpu",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-hdr/"]},{title:"Showcase",collapsable:!0,children:["/showcase/","/showcase/windowless/","/showcase/gifs/","/showcase/pong/","/showcase/compute/","/showcase/alignment/"]},{title:"News",collapsable:!0,children:["/news/0.18 and hdr/","/news/0.17/","/news/0.16/","/news/0.15/","/news/0.14/","/news/0.13/","/news/0.12/","/news/pre-0.12/"]}]}};r(238);zr.component("AutoGithubLink",()=>Promise.all([r.e(0),r.e(37)]).then(r.bind(null,427))),zr.component("RecentArticles",()=>r.e(53).then(r.bind(null,428))),zr.component("WasmExample",()=>Promise.all([r.e(0),r.e(33)]).then(r.bind(null,429))),zr.component("Badge",()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,430)));r(239);var Rf={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:()=>({scrollTop:null}),computed:{show(){return this.scrollTop>this.threshold}},mounted(){this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Pf()(()=>{this.scrollTop=this.getScrollTop()},100))},methods:{getScrollTop:()=>window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,scrollToTop(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},jf=(r(240),Object(If.a)(Rf,(function(){var e=this._self._c;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5fd4ef0c",null).exports),$f=[{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:e})=>{e.component("CodeCopy",Cf)},({Vue:e})=>{e.component("BackToTop",jf)}],Uf=["BackToTop"];class Vf extends class{constructor(){this.store=new zr({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){zr.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(Vf.prototype,{getPageAsyncComponent:ff,getLayoutAsyncComponent:cf,getAsyncComponent:af,getVueComponent:bf});var Nf={install(e){const t=new Vf;e.$vuepress=t,e.prototype.$vuepress=t}};function qf(e,t){const r=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===r)}var Wf={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return df("pageKey",t),zr.component(t)||zr.component(t,ff(t)),zr.component(t)?e(t):e("")}},Kf={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:r})=>e("div",{class:["content__"+t.slotKey]},r()[t.slotKey])},zf={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},Hf=(r(241),r(242),Object(If.a)(zf,(function(){var e=this._self._c;return e("span",[e("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[e("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"}}),this._v(" "),e("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"}})]),this._v(" "),e("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Gf={functional:!0,render(e,{parent:t,children:r}){if(t._isMounted)return r;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};zr.config.productionTip=!1,zr.use(Ku),zr.use(Nf),zr.mixin(function(e,t,r=zr){!function(e){e.locales&&Object.keys(e.locales).forEach(t=>{e.locales[t].path=t});Object.freeze(e)}(t),r.$vuepress.$set("siteData",t);const n=new(e(r.$vuepress.$get("siteData"))),_=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(n)),o={};return Object.keys(_).reduce((e,t)=>(t.startsWith("$")&&(e[t]=_[t].get),e),o),{computed:o}}(e=>class{setPage(e){this.__page=e}get $site(){return e}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:e={}}=this.$site;let t,r;for(const n in e)"/"===n?r=e[n]:0===this.$page.path.indexOf(n)&&(t=e[n]);return t||r||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:e}=this.$page.frontmatter;return"string"==typeof e&&e}get $title(){const e=this.$page,{metaTitle:t}=this.$page.frontmatter;if("string"==typeof t)return t;const r=this.$siteTitle,n=e.frontmatter.home?null:e.frontmatter.title||e.title;return r?n?n+" | "+r:r:n||"VuePress"}get $description(){const e=function(e){if(e){const t=e.filter(e=>"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||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(e,t){for(let r=0;rr||(e.hash?!zr.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,r,n)=>{if(qf(e,t.path))n();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const r=t.path.replace(/\/$/,"")+".html";qf(e,r)?n(r):n()}else n();else{const r=t.path+"/",_=t.path+".html";qf(e,_)?n(_):qf(e,r)?n(r):n()}})}(r);const n={};try{await Promise.all($f.filter(e=>"function"==typeof e).map(t=>t({Vue:zr,options:n,router:r,siteData:Ff,isServer:e})))}catch(e){console.error(e)}return{app:new zr(Object.assign(n,{router:r,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},Uf.map(t=>e(t)))])})),router:r}}(!1).then(({app:e,router:t})=>{t.onReady(()=>{e.$mount("#app")})})}]); \ No newline at end of file diff --git a/beginner/tutorial1-window/index.html b/beginner/tutorial1-window/index.html index f45b1944..817c9f61 100644 --- a/beginner/tutorial1-window/index.html +++ b/beginner/tutorial1-window/index.html @@ -8,7 +8,7 @@ - + @@ -139,7 +139,7 @@ I won't get into the specifics of wasm-bindgen, so if you need a primer (or just </body> </html> -

Press the button below, and you will see the code running!

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

Press the button below, and you will see the code running!

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/beginner/tutorial2-surface/index.html b/beginner/tutorial2-surface/index.html index e05d36e6..14b83d5f 100644 --- a/beginner/tutorial2-surface/index.html +++ b/beginner/tutorial2-surface/index.html @@ -8,7 +8,7 @@ - + @@ -333,7 +333,7 @@ event_loop.r store: wgpu::StoreOp::Store, }, }) -

The RenderPassColorAttachment has the view field, which informs wgpu what texture to save the colors to. In this case, we specify the view that we created using surface.get_current_texture(). This means that any colors we draw to this attachment will get drawn to the screen.

The resolve_target is the texture that will receive the resolved output. This will be the same as view unless multisampling is enabled. We don't need to specify this, so we leave it as None.

The ops field takes a wpgu::Operations object. This tells wgpu what to do with the colors on the screen (specified by view). The load field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The store field tells wgpu whether we want to store the rendered results to the Texture behind our TextureView (in this case, it's the SurfaceTexture). We use StoreOp::Store as we do want to store our render results.

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.

./no-clear.png

# Validation Errors?

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 1.2.182 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 https://github.com/gfx-rs/wgpu (opens new window)

# Challenge

Modify the input() method to capture mouse events, and update the clear color using that. Hint: you'll probably need to use WindowEvent::CursorMoved.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

The RenderPassColorAttachment has the view field, which informs wgpu what texture to save the colors to. In this case, we specify the view that we created using surface.get_current_texture(). This means that any colors we draw to this attachment will get drawn to the screen.

The resolve_target is the texture that will receive the resolved output. This will be the same as view unless multisampling is enabled. We don't need to specify this, so we leave it as None.

The ops field takes a wpgu::Operations object. This tells wgpu what to do with the colors on the screen (specified by view). The load field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The store field tells wgpu whether we want to store the rendered results to the Texture behind our TextureView (in this case, it's the SurfaceTexture). We use StoreOp::Store as we do want to store our render results.

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.

./no-clear.png

# Validation Errors?

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 1.2.182 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 https://github.com/gfx-rs/wgpu (opens new window)

# Challenge

Modify the input() method to capture mouse events, and update the clear color using that. Hint: you'll probably need to use WindowEvent::CursorMoved.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html index 1a8826e3..428a9f32 100644 --- a/beginner/tutorial3-pipeline/index.html +++ b/beginner/tutorial3-pipeline/index.html @@ -8,7 +8,7 @@ - + @@ -162,7 +162,7 @@ In the case of wgpu, it's done by the library called .draw(0..3, 0..1); // 3. } // ... -

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

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

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

Said lovely brown triangle

# Challenge

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

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

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

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

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

Said lovely brown triangle

# Challenge

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

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

←

- + diff --git a/beginner/tutorial4-buffer/index.html b/beginner/tutorial4-buffer/index.html index 94163061..afcf79e1 100644 --- a/beginner/tutorial4-buffer/index.html +++ b/beginner/tutorial4-buffer/index.html @@ -8,7 +8,7 @@ - + @@ -259,7 +259,7 @@ render_pass. render_pass.set_vertex_buffer(0, self.vertex_buffer.slice(..)); render_pass.set_index_buffer(self.index_buffer.slice(..), wgpu::IndexFormat::Uint16); // 1. render_pass.draw_indexed(0..self.num_indices, 0, 0..1); // 2. -

A couple of things to note:

  1. The method name is set_index_buffer, not set_index_buffers. You can only have one index buffer set at a time.
  2. When using an index buffer, you need to use draw_indexed. The draw method ignores the index buffer. Also, make sure you use the number of indices (num_indices), not vertices, as your model will either draw wrong or the method will panic because there are not enough indices.

With all that you should have a garishly magenta pentagon in your window.

Magenta pentagon in window

# Color Correction

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 what 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.

Most monitors use a color space known as sRGB. Our surface is (most likely depending on what is returned from surface.get_preferred_format()) 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 in lighter colors.

You get the correct color using the following formula: srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4. Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing a manual color conversion, 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.

# Challenge

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.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

A couple of things to note:

  1. The method name is set_index_buffer, not set_index_buffers. You can only have one index buffer set at a time.
  2. When using an index buffer, you need to use draw_indexed. The draw method ignores the index buffer. Also, make sure you use the number of indices (num_indices), not vertices, as your model will either draw wrong or the method will panic because there are not enough indices.

With all that you should have a garishly magenta pentagon in your window.

Magenta pentagon in window

# Color Correction

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 what 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.

Most monitors use a color space known as sRGB. Our surface is (most likely depending on what is returned from surface.get_preferred_format()) 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 in lighter colors.

You get the correct color using the following formula: srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4. Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing a manual color conversion, 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.

# Challenge

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.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html index bdf2aad2..84832c4a 100644 --- a/beginner/tutorial5-textures/index.html +++ b/beginner/tutorial5-textures/index.html @@ -8,7 +8,7 @@ - + @@ -404,7 +404,7 @@ render_pass. } } } -

Phew!

With these changes in place, the code should be working the same as before, but we now have a much easier way to create textures.

# Challenge

Create another texture and swap it out when you press the space key.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

Phew!

With these changes in place, the code should be working the same as before, but we now have a much easier way to create textures.

# Challenge

Create another texture and swap it out when you press the space key.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html index d184c900..a3302d8c 100644 --- a/beginner/tutorial6-uniforms/index.html +++ b/beginner/tutorial6-uniforms/index.html @@ -8,7 +8,7 @@ - + @@ -312,7 +312,7 @@ render_pass. self.camera_uniform.update_view_proj(&self.camera); self.queue.write_buffer(&self.camera_buffer, 0, bytemuck::cast_slice(&[self.camera_uniform])); } -

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.

# Challenge

Have our model rotate on its own independently of the camera. Hint: you'll need another matrix for this.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

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.

# Challenge

Have our model rotate on its own independently of the camera. Hint: you'll need another matrix for this.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html index 5ac58ed3..e3f79c83 100644 --- a/beginner/tutorial7-instancing/index.html +++ b/beginner/tutorial7-instancing/index.html @@ -8,7 +8,7 @@ - + @@ -171,7 +171,7 @@ render_pass. out.clip_position = camera.view_proj * model_matrix * vec4<f32>(model.position, 1.0); return out; } -

With all that done, we should have a forest of trees!

./forest.png

# Challenge

Modify the position and/or rotation of the instances every frame.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

With all that done, we should have a forest of trees!

./forest.png

# Challenge

Modify the position and/or rotation of the instances every frame.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html index fe54be42..f92d5c35 100644 --- a/beginner/tutorial8-depth/index.html +++ b/beginner/tutorial8-depth/index.html @@ -8,7 +8,7 @@ - + @@ -112,7 +112,7 @@ stencil_ops: None, }), }); -

And that's all we have to do! No shader code is needed! If you run the application, the depth issues will be fixed.

forest_fixed.png

# Challenge

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 sampler_comparison uniform type and the textureSampleCompare function instead of sampler and sampler2D respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

And that's all we have to do! No shader code is needed! If you run the application, the depth issues will be fixed.

forest_fixed.png

# Challenge

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 sampler_comparison uniform type and the textureSampleCompare function instead of sampler and sampler2D respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html index a8b22277..60490bef 100644 --- a/beginner/tutorial9-models/index.html +++ b/beginner/tutorial9-models/index.html @@ -8,7 +8,7 @@ - + @@ -245,7 +245,7 @@ m.mesh.positions[i * 3 + 1], m.mesh.positions[i * 3 + 2], ], - tex_coords: [m.mesh.texcoords[i * 2], m.mesh.texcoords[i * 2 + 1]], + tex_coords: [m.mesh.texcoords[i * 2], 1.0 - m.mesh.texcoords[i * 2 + 1]], normal: [ m.mesh.normals[i * 3], m.mesh.normals[i * 3 + 1], @@ -411,7 +411,7 @@ render_pass.

The code in lib.rs will change accordingly.

render_pass.set_vertex_buffer(1, self.instance_buffer.slice(..));
 render_pass.set_pipeline(&self.render_pipeline);
 render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
-
Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/c647d563b62e7aa135b2.module.wasm b/c647d563b62e7aa135b2.module.wasm new file mode 100644 index 00000000..c3b27fa6 Binary files /dev/null and b/c647d563b62e7aa135b2.module.wasm differ diff --git a/cd654cff24f9679296af.module.wasm b/cd654cff24f9679296af.module.wasm new file mode 100644 index 00000000..ad4eb79b Binary files /dev/null and b/cd654cff24f9679296af.module.wasm differ diff --git a/d067d0cf1e0a7404a1f4.module.wasm b/d067d0cf1e0a7404a1f4.module.wasm deleted file mode 100644 index 26502e43..00000000 Binary files a/d067d0cf1e0a7404a1f4.module.wasm and /dev/null differ diff --git a/d86566f33755bcff2c58.module.wasm b/d86566f33755bcff2c58.module.wasm new file mode 100644 index 00000000..3f342490 Binary files /dev/null and b/d86566f33755bcff2c58.module.wasm differ diff --git a/d97281fb699f0f310919.module.wasm b/d97281fb699f0f310919.module.wasm deleted file mode 100644 index 7704e1fa..00000000 Binary files a/d97281fb699f0f310919.module.wasm and /dev/null differ diff --git a/6aedf8224dc13b5d0a82.module.wasm b/db7bc65eef98067d8211.module.wasm similarity index 76% rename from 6aedf8224dc13b5d0a82.module.wasm rename to db7bc65eef98067d8211.module.wasm index 0cc3785f..a9008e22 100644 Binary files a/6aedf8224dc13b5d0a82.module.wasm and b/db7bc65eef98067d8211.module.wasm differ diff --git a/dbc238f3b2a972436c43.module.wasm b/dbc238f3b2a972436c43.module.wasm deleted file mode 100644 index 2f05522d..00000000 Binary files a/dbc238f3b2a972436c43.module.wasm and /dev/null differ diff --git a/fd2282b68a5c4113609e.module.wasm b/fd2282b68a5c4113609e.module.wasm new file mode 100644 index 00000000..7c268fe1 Binary files /dev/null and b/fd2282b68a5c4113609e.module.wasm differ diff --git a/index.html b/index.html index fb6f11de..a99137e6 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,15 @@ - + -
Learn Wgpu

# Introduction

# What is wgpu?

Wgpu (opens new window) is a Rust implementation of the WebGPU API spec (opens new window). 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).

Wgpu is still in development, so some of this doc is subject to change.

# Why Rust?

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.

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 Rust tutorial (opens new window). You should also be familiar with Cargo (opens new window).

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.

# Contribution and Support

  • I accept pull requests (GitHub repo (opens new window)) for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.
  • Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.
  • If you want to support me directly, check out my patreon (opens new window)!

# Translations

# Special thanks to these patrons!

  • David Laban
  • Lennart
  • Ian Gowen
  • Aron Granberg
  • Bernard Llanos
  • Jan Šipr
  • Zeh Fernando
  • Youngsuk Kim
  • オリトイツキ
  • Andrea Postal
  • Julius Liu
  • Feng Liang
  • Mattia Samiolo
  • Joris Willems
  • Jani Turkia
  • papyDoctor
  • Filip
Last Updated: 12/27/2023, 9:52:25 PM

+

Learn Wgpu

# Introduction

# What is wgpu?

Wgpu (opens new window) is a Rust implementation of the WebGPU API spec (opens new window). 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).

Wgpu is still in development, so some of this doc is subject to change.

# Why Rust?

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.

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 Rust tutorial (opens new window). You should also be familiar with Cargo (opens new window).

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.

# Contribution and Support

  • I accept pull requests (GitHub repo (opens new window)) for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.
  • Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.
  • If you want to support me directly, check out my patreon (opens new window)!

# Translations

# Special thanks to these patrons!

  • David Laban
  • Lennart
  • Ian Gowen
  • Aron Granberg
  • Bernard Llanos
  • Jan Šipr
  • Zeh Fernando
  • Youngsuk Kim
  • オリトイツキ
  • Andrea Postal
  • Julius Liu
  • Feng Liang
  • Mattia Samiolo
  • Joris Willems
  • Jani Turkia
  • papyDoctor
  • Filip
Last Updated: 1/20/2024, 10:13:50 PM

Dependencies and the window →

- + diff --git a/intermediate/pbr-notes.html b/intermediate/pbr-notes.html index bf725245..30c236fa 100644 --- a/intermediate/pbr-notes.html +++ b/intermediate/pbr-notes.html @@ -8,11 +8,11 @@ - + -
Learn Wgpu

# Sources

  • https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading
  • http://jimmiejohnsson84.me/pages/rendering_pbr.html
Last Updated: 12/27/2023, 9:52:25 PM
- +
Learn Wgpu

# Sources

  • https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading
  • http://jimmiejohnsson84.me/pages/rendering_pbr.html
Last Updated: 1/20/2024, 10:13:50 PM
+ diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html index 6a302c9e..8398e452 100644 --- a/intermediate/tutorial10-lighting/index.html +++ b/intermediate/tutorial10-lighting/index.html @@ -8,7 +8,7 @@ - + @@ -625,7 +625,7 @@ issues. You can learn more about the alignment rules in the let half_dir = normalize(view_dir + light_dir); let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0); -

It's hard to tell the difference, but here are the results.

./half_dir.png

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

It's hard to tell the difference, but here are the results.

./half_dir.png

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

←

- + diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html index 3092df0c..336b208b 100644 --- a/intermediate/tutorial11-normals/index.html +++ b/intermediate/tutorial11-normals/index.html @@ -8,7 +8,7 @@ - + @@ -181,7 +181,7 @@ m.mesh.positions[i * 3 + 1], m.mesh.positions[i * 3 + 2], ], - tex_coords: [m.mesh.texcoords[i * 2], m.mesh.texcoords[i * 2 + 1]], + tex_coords: [m.mesh.texcoords[i * 2], 1.0 - m.mesh.texcoords[i * 2 + 1]], normal: [ m.mesh.normals[i * 3], m.mesh.normals[i * 3 + 1], @@ -475,7 +475,7 @@ render_pass. &self.camera_bind_group, &self.light_bind_group, ); -

That gives us something like this.

You can find the textures I use in the GitHub Repository.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

That gives us something like this.

You can find the textures I use in the GitHub Repository.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html index 90f866f3..bbc25d89 100644 --- a/intermediate/tutorial12-camera/index.html +++ b/intermediate/tutorial12-camera/index.html @@ -8,7 +8,7 @@ - + @@ -370,7 +370,7 @@ } }); } -

With that, we should be able to move our camera wherever we want.

./screenshot.png

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

With that, we should be able to move our camera wherever we want.

./screenshot.png

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/intermediate/tutorial13-hdr/index.html b/intermediate/tutorial13-hdr/index.html index 7775900c..6128d257 100644 --- a/intermediate/tutorial13-hdr/index.html +++ b/intermediate/tutorial13-hdr/index.html @@ -8,7 +8,7 @@ - + @@ -967,7 +967,7 @@ return vec4<f32>(result, object_color.a); } -

A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:

just-reflections

Here's the finished scene:

with-reflections

# Demo

If your browser doesn't support WebGPU, this example won't work for you.

Check out the code! (opens new window)
Last Updated: 12/27/2023, 9:52:25 PM

+

A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:

just-reflections

Here's the finished scene:

with-reflections

# Demo

If your browser doesn't support WebGPU, this example won't work for you.

Check out the code! (opens new window)
Last Updated: 1/20/2024, 10:13:50 PM

← →

- + diff --git a/intermediate/wip-terrain/index.html b/intermediate/wip-terrain/index.html index 95f19c81..e06bbc8e 100644 --- a/intermediate/wip-terrain/index.html +++ b/intermediate/wip-terrain/index.html @@ -8,7 +8,7 @@ - + @@ -123,7 +123,7 @@ gen_terrain(global_invocation_id)

If you want to learn more about workgroups, check out the docs (opens new window).

TODO:

  • Note changes to create_render_pipeline
  • Mention swizzle feature for cgmath
  • Compare workgroups and workgroups sizes to nested for-loops -
    • Maybe make a diagram in Blender?
  • Change to camera movement speed
Last Updated: 12/27/2023, 9:52:25 PM
- +
  • Maybe make a diagram in Blender?
  • Change to camera movement speed
    • Last Updated: 1/20/2024, 10:13:50 PM
    + diff --git a/news/0.12/index.html b/news/0.12/index.html index c1157601..e48bebf4 100644 --- a/news/0.12/index.html +++ b/news/0.12/index.html @@ -8,7 +8,7 @@ - + @@ -50,7 +50,7 @@ I needed to do was add a padding field:

    Last Updated: 12/27/2023, 9:52:25 PM

    +if you're curious feel free to look at the repo.

    Last Updated: 1/20/2024, 10:13:50 PM

    ←

    this PR (opens new window).

    Another thing to note is that presentation modes need to match what the surface supports. You can get a list of supported modes from Surface::get_surface_modes() (opens new window).

    As always, let me know if I missed anything in the migration process. You can open an issue/submit a PR on the Learn Wgpu repo (opens new window)!

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    You can explore the reasoning for the change to map_async in this PR (opens new window).

    Another thing to note is that presentation modes need to match what the surface supports. You can get a list of supported modes from Surface::get_surface_modes() (opens new window).

    As always, let me know if I missed anything in the migration process. You can open an issue/submit a PR on the Learn Wgpu repo (opens new window)!

    Last Updated: 1/20/2024, 10:13:50 PM

    ←

    # Winit updated

    Winit has been updated to version "0.27" so if you build on linux you may need to update some of your packages:

    sudo apt install libfontconfig libfontconfig1-dev
-
    Last Updated: 12/27/2023, 9:52:25 PM

    +

    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/news/0.15/index.html b/news/0.15/index.html index 586a83f9..705e0605 100644 --- a/news/0.15/index.html +++ b/news/0.15/index.html @@ -8,7 +8,7 @@ - + @@ -35,7 +35,7 @@ alpha_mode: surface_caps.alpha_modes[0], view_formats: vec![], }; -

    As always let me know if I missed anything. You can check out the full changelog for 0.15 here (opens new window)

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    As always let me know if I missed anything. You can check out the full changelog for 0.15 here (opens new window)

    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/news/0.16/index.html b/news/0.16/index.html index 0f89cfaa..76d80f58 100644 --- a/news/0.16/index.html +++ b/news/0.16/index.html @@ -8,7 +8,7 @@ - + @@ -42,7 +42,7 @@ "Element", "Location", ]} -

    No other changes need to be made to switch to using WebGPU in browser, so once the WebGPU samples at https://webgpu.github.io/ (opens new window) work in Chrome on Linux, I'll look into removing the webgl feature.

    That's all! As always let me know if I missed anything!

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    No other changes need to be made to switch to using WebGPU in browser, so once the WebGPU samples at https://webgpu.github.io/ (opens new window) work in Chrome on Linux, I'll look into removing the webgl feature.

    That's all! As always let me know if I missed anything!

    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/news/0.17/index.html b/news/0.17/index.html index 7cc4766a..345114b1 100644 --- a/news/0.17/index.html +++ b/news/0.17/index.html @@ -8,11 +8,11 @@ - + -
    Learn Wgpu

    # Update to 0.17

    No changes needed to the tutorial!

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    - + diff --git a/news/0.18 and hdr/index.html b/news/0.18 and hdr/index.html index fe34305d..8bf50f59 100644 --- a/news/0.18 and hdr/index.html +++ b/news/0.18 and hdr/index.html @@ -8,7 +8,7 @@ - + @@ -24,7 +24,7 @@ rolling out support for WebGPU, I felt more confident writing a tutorial for them.

    Also, I'm been interested learning how to load HDR images from places like Polyhaven, so I decided to introduce compute shaders by creating one that will load an HDR and -convert it to a Cubemap to be rendered.

    You can check it out here!

    Last Updated: 12/27/2023, 9:52:25 PM
    - +convert it to a Cubemap to be rendered.

    You can check it out here!

    Last Updated: 1/20/2024, 10:13:50 PM
    + diff --git a/news/pre-0.12/index.html b/news/pre-0.12/index.html index 0d6afad3..268be897 100644 --- a/news/pre-0.12/index.html +++ b/news/pre-0.12/index.html @@ -8,7 +8,7 @@ - + @@ -43,11 +43,11 @@ surface.conf
    1. The request_device method now returns a (Device, Queue) tuple. This means that you can borrow the Queue mutably while using the Device immutably. Because of this change, submitting CommandBuffers to the queue uses the submit method on the Queue directly.
    self.queue.submit(&[
     encoder.finish()
 ]);
-
    1. The create method on Surface takes in any struct that implements the HasRawWindow trait, instead of a RawWindowHandle. This means that the raw-window-handle = "0.3" line in Cargo.toml is no longer needed.

    I don't know if this is a change from 0.4, but you use wgpu = "0.4" line in dependencies instead of the [dependencies.wgpu] as wgpu will determine the best back end for you.

    # New/Recent Articles

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    1. The create method on Surface takes in any struct that implements the HasRawWindow trait, instead of a RawWindowHandle. This means that the raw-window-handle = "0.3" line in Cargo.toml is no longer needed.

    I don't know if this is a change from 0.4, but you use wgpu = "0.4" line in dependencies instead of the [dependencies.wgpu] as wgpu will determine the best back end for you.

    # New/Recent Articles

    Last Updated: 1/20/2024, 10:13:50 PM

    ←

    - + diff --git a/showcase/alignment/index.html b/showcase/alignment/index.html index 7d3cfd18..81c36e71 100644 --- a/showcase/alignment/index.html +++ b/showcase/alignment/index.html @@ -8,7 +8,7 @@ - + @@ -37,7 +37,7 @@ AlignOf(S) = max(AlignOfMember(S, M1), ... , AlignOfMember(S, Mn)) | = note: source type: `LightUniform` (256 bits) = note: target type: `_::{closure#0}::TypeWithoutPadding` (192 bits) -

    # Additional resources

    If you're looking for more information check out the write-up (opens new window) by @teoxoy.

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    # Additional resources

    If you're looking for more information check out the write-up (opens new window) by @teoxoy.

    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/showcase/compute/index.html b/showcase/compute/index.html index a01a11f7..e570ec7e 100644 --- a/showcase/compute/index.html +++ b/showcase/compute/index.html @@ -8,7 +8,7 @@ - + @@ -113,7 +113,7 @@ }); flat_triangle_map.extend(t_list); } -

    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 than the simple method.

    # Results

    The tangents and bitangents are now getting calculated correctly and on the GPU!

    ./results.png

    Check out the code! (opens new window)
    Last Updated: 12/27/2023, 9:52:25 PM

    +

    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 than the simple method.

    # Results

    The tangents and bitangents are now getting calculated correctly and on the GPU!

    ./results.png

    Check out the code! (opens new window)
    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html index 920e17fe..17fdae2f 100644 --- a/showcase/gifs/index.html +++ b/showcase/gifs/index.html @@ -8,7 +8,7 @@ - + @@ -140,7 +140,7 @@ }

    Once that's done we can pass our frames into save_gif().

    save_gif("output.gif", &mut frames, 1, texture_size as u16).unwrap();
-

    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.

    ./output.gif

    Check out the code! (opens new window)
    Last Updated: 12/27/2023, 9:52:25 PM

    +

    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.

    ./output.gif

    Check out the code! (opens new window)
    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/showcase/imgui-demo/index.html b/showcase/imgui-demo/index.html index 3f811ff0..ea285c56 100644 --- a/showcase/imgui-demo/index.html +++ b/showcase/imgui-demo/index.html @@ -8,7 +8,7 @@ - + @@ -106,7 +106,7 @@ imgui.fonts< drop(pass); display.queue.submit(Some(encoder.finish())); -

    That's all there is to it. Here's a picture of the results!

    ./screenshot.png

    Check out the code! (opens new window)
    Last Updated: 12/27/2023, 9:52:25 PM
    - +

    That's all there is to it. Here's a picture of the results!

    ./screenshot.png

    Check out the code! (opens new window)
    Last Updated: 1/20/2024, 10:13:50 PM
    + diff --git a/showcase/index.html b/showcase/index.html index d340b833..75cea230 100644 --- a/showcase/index.html +++ b/showcase/index.html @@ -8,11 +8,11 @@ - + -
    Learn Wgpu

    # Foreword

    The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with wgpu. I won't go over the specifics of creating wgpu resources, as those will be covered elsewhere. The code for these examples is still available however and will be accessible on Github.

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    Learn Wgpu

    # Foreword

    The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with wgpu. I won't go over the specifics of creating wgpu resources, as those will be covered elsewhere. The code for these examples is still available however and will be accessible on Github.

    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/showcase/pong/index.html b/showcase/pong/index.html index c9cea0f3..737271e1 100644 --- a/showcase/pong/index.html +++ b/showcase/pong/index.html @@ -8,7 +8,7 @@ - + @@ -282,7 +282,7 @@ naga = { version = "0.9", features = ["glsl-in", "spv-o }) .expect("Couldn't append canvas to document body."); } -

    Everything else works the same.

    # Summary

    A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.

    Try the code down below! (Controls currently require a keyboard.)

    Last Updated: 12/27/2023, 9:52:25 PM

    +

    Everything else works the same.

    # Summary

    A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.

    Try the code down below! (Controls currently require a keyboard.)

    Last Updated: 1/20/2024, 10:13:50 PM

    ← →

    - + diff --git a/showcase/threading/index.html b/showcase/threading/index.html index 8985fa85..5b1068e0 100644 --- a/showcase/threading/index.html +++ b/showcase/threading/index.html @@ -8,7 +8,7 @@ - + @@ -102,7 +102,7 @@ }

    We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but rayon should prevent us from using too many threads.

    You'll notice that we didn't use rayon 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 vertices. I don't feel like introducing a std::sync::Mutex, so I'll leave it for now.

    This is honestly a better job for a compute shader, as the model data is going to get loaded into a buffer anyway.

    # It's that easy!

    Most of the wgpu types are Send + Sync, 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.

    Elapsed (Original): 309.596382ms
 Elapsed (Threaded): 199.645027ms
-

    We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.

    Check out the code! (opens new window)
    Last Updated: 12/27/2023, 9:52:25 PM
    - +

    We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.

    Check out the code! (opens new window)
    Last Updated: 1/20/2024, 10:13:50 PM
    + diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html index e4dd918a..3b8706b1 100644 --- a/showcase/windowless/index.html +++ b/showcase/windowless/index.html @@ -8,7 +8,7 @@ - + @@ -229,7 +229,7 @@ output_buffer.fn main() { pollster::block_on(run()); } -

    With all that you should have an image like this.

    a brown triangle

    Check out the code! (opens new window)
    Last Updated: 12/27/2023, 9:52:25 PM

    +

    With all that you should have an image like this.

    a brown triangle

    Check out the code! (opens new window)
    Last Updated: 1/20/2024, 10:13:50 PM

    ←

    - + + diff --git a/topics/index.html b/topics/index.html index 35b4a6f7..1cc666d6 100644 --- a/topics/index.html +++ b/topics/index.html @@ -8,12 +8,12 @@ - + - +who are looking for a specific thing!

    # Basics

    # Lighting

    # Misc

    Last Updated: 1/20/2024, 10:13:50 PM
    +